Skip to content

0x033-elementUI自定义上传文件代码段

需要满足重新定义上传参数(默认file)、自定义进度条

js
<el-upload
	drag
	action=""
	:http-request="uploadFile"
	:show-file-list="false"
	accept=".apk"
	:multiple="false">
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">{{ form.url ? '如需重新上传,' : ''}}请将apk文件拖到此处,或<em>点击上传</em></div>
	<el-progress style="width: 200px;margin: 8px auto 0;" :text-inside="true" :stroke-width="20"
				 v-if="progressPercent"
				 :percentage="progressPercent"/>
  </el-upload>

uploadFile(item) {  
  const onUploadProgress = progressEvent => {  
    this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)  
  }
  const form = new FormData()  
  form.append('fileName', fileObj)  
  uploadApk(form, onUploadProgress)  
    .then((res) => {       
    })  
    .catch(function (err) {  
      let res = err.response  
      this.$message.error(res.data.msg)  
    }).finally(() => {  
    this.progressPercent = ''  
  })  
}
<el-upload
	drag
	action=""
	:http-request="uploadFile"
	:show-file-list="false"
	accept=".apk"
	:multiple="false">
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">{{ form.url ? '如需重新上传,' : ''}}请将apk文件拖到此处,或<em>点击上传</em></div>
	<el-progress style="width: 200px;margin: 8px auto 0;" :text-inside="true" :stroke-width="20"
				 v-if="progressPercent"
				 :percentage="progressPercent"/>
  </el-upload>

uploadFile(item) {  
  const onUploadProgress = progressEvent => {  
    this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)  
  }
  const form = new FormData()  
  form.append('fileName', fileObj)  
  uploadApk(form, onUploadProgress)  
    .then((res) => {       
    })  
    .catch(function (err) {  
      let res = err.response  
      this.$message.error(res.data.msg)  
    }).finally(() => {  
    this.progressPercent = ''  
  })  
}

api示例:

js
import axios from "axios";
export function uploadApk(formData, onUploadProgress) {  
  const UploadInstance = axios.create({  
    baseURL: '',  
    headers: {  
      'Authorization': 'Bearer ' + getToken()  
    }  
  });  
  return UploadInstance.post(  
    '/xxx/uploadFile',  
    formData,  
    {  
      onUploadProgress  
    }  
  )  
}
import axios from "axios";
export function uploadApk(formData, onUploadProgress) {  
  const UploadInstance = axios.create({  
    baseURL: '',  
    headers: {  
      'Authorization': 'Bearer ' + getToken()  
    }  
  });  
  return UploadInstance.post(  
    '/xxx/uploadFile',  
    formData,  
    {  
      onUploadProgress  
    }  
  )  
}