iview upload上传文件（自动上传、手动上传）

最新推荐文章于 2025-02-25 18:20:59 发布

qq_37656005

最新推荐文章于 2025-02-25 18:20:59 发布

阅读量7.8k

点赞数 6

分类专栏： iview 文章标签： vue upload

本文链接：https://blog.csdn.net/qq_37656005/article/details/110230372

版权

iview 专栏收录该内容

7 篇文章

订阅专栏

介绍一下开发中遇到的关于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();
		 }
   }
}

手动上传，除文件之外，还需要附带其他信息，如文件描述等等，如下图，点击“提交”按钮，一起上传
重点在于设置请求头部为 ‘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);
                }
              })
	        }
        }
}