vue通过el-upload组件上传文件到服务器使用总结

vue通过el-upload组件上传文件到服务器使用总结

1.业务需求：

• vue项目需要通过elementUI的el-upload组件上传文件，但是一般情况下请求接口是需要携带token值的，如果不携带则上传不成功，而el-upload是通过 action 属性来设置请求地址的，所以要处理请求头就需要处理headers属性。

2.解决方案：

• HTML如下（这是比较全面的写法，其中：action属性是自定义上传地址；headers属性是自定义请求头，比如携带token等；limit属性是上传个数限制；file-list属性是多个文件上传时所在的list）：

•    			<el-form-item>
                   <el-upload
                     class="upload-demo"
                     :action="base2"
                     :headers="upHeaders"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :before-remove="beforeRemove"
                     multiple
                     :limit="1"
                     :before-upload="beforeUpload"
                     :on-exceed="handleExceed"
                     :on-success="handleSuccess"
                     :on-error="handleError"
                     :file-list="fileList">
                     <i class="el-icon-upload"><span> 导入文件</span></i>
                   </el-upload>
  

• 上传生命周期函数如下

•    	  // 删除文件钩子
          handleRemove(file, fileList) {
                console.log(file, fileList)
              },
         // 已上传文件钩子
          handlePreview(file) {
             console.log(file)
           },
         // 文件上传前的钩子(这里可以对文件上传时的后缀进行限制)
          beforeUpload(file) {
             var FileExt = file.name.replace(/.+\./, '')
             if (['json', 'JSON'].indexOf(FileExt) === -1) {
               this.$message({
                 type: 'warning',
                 message: '请上传后缀名为 json 的文件！',
               })
               return false
           }
         },
        // 上传文件个数限制钩子
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
          },
        // 删除文件前的钩子
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
        // 上传失败钩子
          handleError(err, file, fileList) {
            this.$message.error(err.errormsg)
          },
        // 上传成功钩子(在这里可以处理上传成功后端返回的数据)
          handleSuccess(rep, file, fileList) {
            console.log(req)
          },