前端-文件上传

文件上传

1. vue+element 文件上传

<el-upload
  class="upload-demo"
  //必选参数，上传的地址
  action="https://jsonplaceholder.typicode.com/posts/"
  //是否支持多选文件
  multiple
  //最大允许上传个数
  :limit="3"
  //覆盖默认的上传行为，可以自定义上传的实现
  :http-request="uploadFn"
  >
  
  <el-button size="small" type="primary">点击上传</el-button>
  
</el-upload>

//上传函数
uploadFn( files //element默认传参-选择的文件){
	//获取文件信息
	let file = files.file
	// 将文件放入formData中
	let formData = new FormData()
	//不一定添加属性名叫 'file' , 可以自定义
	formData.append('file', file)
	//接口函数
	axiosFn(formData).then( res=>{
		//提示结果
		this.$message.success(  res.msg )
	} )
}
//上传前钩子，判断文件类型、大小等
:before-upload = "beforeUpload"

beforeUpload( file//默认传参 ){
//判断类型
const typeName = file.type === 'image/jpeg' || file.type === 'image/png'
 if (!typeName) {
   this.$message.error('You can only upload JPG file!')
 }
 //判断大小
 const isLt200KB = file.size / 1024 < 200
 if (!isLt200KB) {
   this.$message.error('Image must smaller than 200KB!')
 }
 //若返回 false，则停止上传 , 提示删掉该文件（自动调用删除方法）
 return   typeName && isLt200KB
}

上述选择完文件就自动上传
想要手动上传：
加上 :auto-upload = “false” 属性, 加上ref=“upload”

submitUpload() {
//调用自身自带的submit（）方法
this.$refs.upload.submit();
},

链接：其他案例 https://www.cnblogs.com/wjw1014/p/14415225.html

2. 原生上传

//file类型可以选择文件  用change方法-获取文件内容
<input type='file'  @change="onFileChange">

//
onFileChange(e){
   let files = e.target.files || e.dataTransfer.files;
    // 通过FormData将文件转成二进制数据
   let formData = new FormData();
   // 将文件转二进制
   formData.append('upload',files[0])
 	// 还可以携带其他信息一起上传
 	formData.append("userid", userid);
	formData.append("age", age);
	
  axios.post(formData,url).then(function(){})
 }

优秀案例：使用elementui批量上传文件

此方法是先选取文件，后直接一次性上传文件，只会发送一次请求
链接 https://www.cnblogs.com/m1754171640/p/14169291.html

<el-upload
	    :file-list="fileListArr"  //选择的上传文件列表数据
	    //上传地址,可以直接写上传地址比如www.baidu.com;我这里的地址是需要携带其他参数的所以这里随便填写，因为这是必填参数
	    action="scfj"      
	    ref="scfj"
	    accept=".xls, .xlsx, .doc, .docx, .rar"  //可上传文件的类型
	    :before-upload="beforeUploadFj"          //此方法再上传之前对文件再次校验
	    :on-exceed="handleExceedFj"              //此方法用来对上传文件超过个数进行限制
	    :on-remove="handleRemoveFj"              //此方法删除上传文件时触发
	    multiple                                 //是否可以上传多个文件
	    :limit="10"                              //上传文件的个数限制
	    :auto-upload="false"                     //关闭自动上传；如开启自动上传，即选择之后就上传
	    :on-change="onChangeFj"                  //此方法选择文件时候触发
	  >
	  
	    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
	    <el-button
	      style="margin-left: 10px;"
	      size="small"
	      type="success"
	      @click="uploadFj"                      //调用上传接口进行上传
	      >上传附件</el-button>
 </el-upload>

//选择文件时候触发  需根据需求具体分析
   onChangeFj(file, fileList) {
        console.log(file.fileList)
      	this.fileListArr = fileList; //赋值给文件列表
      //this.gwModleObj.scfj = fileList;
      //this.$refs.gwModleObj.validateField("scfj");
      //this.saveSuccessId = 1;
    },

//删除事件，需要根据具体业务分析，即删除时候从数组中去除选中的文件
    handleRemoveFj(file, fileList) {
        console.log(file.fileList)
      	this.fileListArr = fileList; //赋删除后新值给文件列表
      //let delArr = this.saveScfjArr.filter((item) => {
       // return item != file.name;
     // });

     // this.saveScfjArr = delArr;
      //this.gwModleObj.scfj = this.saveScfjArr;
    },

//对上传文件超过个数进行限制
    handleExceedFj(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 files.length个文件，共选择了{
          files.length + fileList.length
        } 个文件`
      );
    },

//对上传文件再次校验
 beforeUploadFj(file) {
      let zhzxFile = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = zhzxFile === "xls";
      const extension2 = zhzxFile === "xlsx";
      const extension3 = zhzxFile === "doc";
      const extension4 = zhzxFile === "docx";
      const extension5 = zhzxFile === "rar";

      // const isLt2M = file.size / 1024 / 1024 < 10   根据需求是否需要对上传文件大小进行限制
      if (
        !extension &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5
      ) {
        this.$message({
          message: "上传文件只能是 xls、xlsx、doc、docx、rar格式!",
          type: "warning",
        });
      }
      // if(!isLt2M) {
      //     this.$message({
      //         message: '上传文件大小不能超过 10MB!',
      //         type: 'warning'
      //     });
      // }
      // return extension || extension2 && isLt2M
return extension || extension2 || extension3 || extension4 || extension5;
    },

//上传接口，进行上传
 uploadFj(value) {
      this.$refs.scfj.submit(); //调用element自带上传方法
      let formData = new FormData();
      //所需参数
      this.fileListArr.forEach((item) => {
        formData.append("file", item.raw);  
        //使用append 对同一个属性追加不同值，会自动生成数组，
        //使用formData.get()查看第一个；使用formData.getAll()查看全部
      });
      
     //接口
      getUploadFjApi(formData).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("附件上传成功！");
          this.saveScfjArr = res.data.data;
          this.saveSuccessId = "";
            this.$refs.scfj.clearFiles();  //清除上传文件 ，
            //我使用了报错，可以写成this.fileListArr=[]
        }
      });
    },