Vue上传文件 iview Upload UI 组件上传组件

Z时代
2024-01-10
分类：综合

vue

Vue上传文件

input支持上传文件定义type类型，隐藏样式第三定义change事件拿到file 的相关信息，accept限制支持的文件类型
然后给button增加点击事件

template部分

<template>
	 <button type="button" @click="click" class="oUpload">
        <span v-if="fileName">重新上传</span>
        <span v-else>选择文件上传</span>
    </button>
    <span>{{fileName}}</span>
    <input type="file" ref="uploadFile" style="display:none" accept=".xlsx" @change="upload"/>
</template>

script部分

export default {
	data(){
		return {
			 action:url,
      	     fileHeader: {
		        Authorization:token
		      },
		}
	},
	methods:{
		upload(event){
	       let files = event.target.files || event.dataTransfer.files;
	      if (!files.length) {
	          this.fileName = '';
	          return;
	      }
	      this.fileName = files[0].name;
	      // 上传之后调用接口...
	      let params = new FormData();
	      params.append('file', files[0]);
	      this.$refs.uploadFile.value = null;
	      request.post(url,params).then(
	          data => {
	           this.$message.success('上传文件成功！')
	          }
	        );
	        this.$refs.uploadFile.value = null; 
	    },
	    click () {//声东击西
	         this.$refs.uploadFile.click();
	    }
	}
}

css部分

 .oUpload{
    min-height: 1.5em;
      display: inline-block;
      padding: 12px 36px;
      margin: 5px 5px 5px 0px;
      cursor: pointer;
      opacity: 0.9;
      color: #FFF;
      font-size: 1em;
      letter-spacing: 1px;
      text-shadow: rgba(0,0,0,0.9) 0px 1px 2px;
      background: #00a679;
      border: 1px solid #99e9d4;
      border-radius: 4px;
      box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
      transition: all 0.1s linear;
  }

也可在公共的拦截器方法里增加params

iview Upload UI 组件上传组件

template部分

<template>
	  <Upload 
        ref="file"
        name='file'
        :show-upload-list="false"
        :on-success="uploadSuccess"
        :format="['xlsx']"
        :on-format-error="handleFormatError"
        :action="action"
        :on-error="uploadError"
        :headers="fileHeader"
        :data="uploadData" 
        :before-upload="beforeUpload"  
      >
          <Button class="update-locale">上传文件</Button>
      </Upload>
</template>

script部分

export default {
	data(){
		return {
			fileName:'',
      	    uploadData:{}	
		}
	},
	methods:{
		beforeUpload(){
            this.uploadData = {
	            data1,data2,
	        };
            let promise = new Promise((resolve) => {
                this.$nextTick(function () {
                    resolve(true);
                });
            });
            return promise; 
        },
        uploadSuccess (res, file) {
	      if (res.code === 1) {
	          util.message.success('上传成功！');
	      }else{
	        util.message.error(res.message);
	      }
	    },
	    uploadError(error) {
	      util.message.error(error);
	    }
	}
}