iview upload上传文件(自动上传、手动上传)

介绍一下开发中遇到的关于iview 文件选择上传和拖拽上传控件upload,手动上传文件信息和自动上传的不同代码写法

1.自动上传,不需要附带其他除文件外的信息

 <Upload ref="upload"
                  :format="['txt']"
                  :max-size="61440"
                  :action="/yourPath"
                  :on-success="success" 
                  :on-error="err" 
                  :on-format-error="err"
                  >
 export default {
	 methods:{
	   //图片或者文件上传成功回调函数
		 success(res, file, fileList) {
		     if (res.result == 'N') {
		       this.$Message.error(res.message, 3);
		     } else {
		       this.$Message.success('上传成功', 3);
		     }
		     //清空文件
		     this.$refs.upload.clearFiles();
		},
		//上传图片失败回调函数
		 err(res, file, fileList) {
		   this.$Message.error('文件上传失败!', 3);
		   this.$refs.upload.clearFiles();
		 }
   }
}

  1. 手动上传,除文件之外,还需要附带其他信息,如文件描述等等,如下图,点击“提交”按钮,一起上传
    重点在于设置请求头部为 ‘Content-Type’: ‘multipart/form-data’
    在这里插入图片描述
 <Upload ref="upload"
         action="123"
         :before-upload="handleUpload">
	<Button type="default" ghost >上传</Button>
</Upload>
 export default {
      name: "dataSet",
      data(){
        return{
         uploadModelModal:{
            file:'',
            modelName:'',
            modelFileName:'',
            modelDesc:''
          }
        },
        methods:{
	         handleUpload (file) {
	          this.uploadModelModal.modelFileName = file.name;
	          this.uploadModelModal.file = file;
	          //阻止自动上传
	          return false;
	        },
	        handleUploadModel(){
	         **//添加请求头**
              let config = {
                headers: {'Content-Type': 'multipart/form-data'}
              };
              //以formData形式上传
              var param = new FormData();
              param.append('file',this.uploadModelModal.file);
              param.append('modelName',this.uploadModelModal.modelName);
              param.append('modelDesc',this.uploadModelModal.modelDesc);
             
              this.$axios.post(path + 'model/upload', param, config).then((res) => {
                console.log("上传模型",res);
               
                if(res.data.result == 'Y'){
                  this.$Message.success(res.data.message);
                }else{
                  this.$Message.error(res.data.message);
                }
              })
	        }
        }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值