element-ui上传功能自定义方法写并加进度条（不用elementui实例）

独步炎凉的大彬

已于 2022-05-27 15:46:02 修改

阅读量2.9k

点赞数 1

分类专栏： vue 文章标签： elementui ui vue.js

于 2020-02-24 13:17:44 首次发布

本文链接：https://blog.youkuaiyun.com/qcg14774125/article/details/104476012

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Axios库实现IPA文件的上传功能，包括进度条显示、与后端交互获取OSS Token、设置请求头、处理文件名以及解析上传后的IPA文件信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

     <el-upload
            class="upload-demo"
            :before-upload="beforeUpload"
            :headers="headers"
            drag
            accept=".ipa"
            action="string"
            :http-request="newuploadipa"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-progress v-if="progressFlag == true" :percentage="progressPercent" :color="customColor"></el-progress>

其中newuploadipa是方法名字，

 axios.get(BASE_URL+'/api/common/ossToken',config1).then(res => {
              this.dir=res.data.data.dir
              formData.append('policy', res.data.data.policy)
              formData.append('success_action_status', 200)
              formData.append('signature', res.data.data.signature)
              formData.append('OSSAccessKeyId', res.data.data.accessid)
              formData.append('name',this.$md5(item.file.name.split(".ipa")[0])+timeStamp+'.ipa')
              formData.append('key', res.data.data.dir+this.$md5(item.file.name.split(".ipa")[0])+timeStamp+'.ipa')
              formData.append('file', item.file)
              this.progressFlag=true
              let config3 = {
                headers:{'token':localStorage.getItem('Authorization')},
                onUploadProgress: progressEvent => {   //进度条
                  // progressEvent.loaded:已上传文件大小
                  // progressEvent.total:被上传文件的总大小
                  this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
                }
              };
              axios.post(res.data.data.host,formData,config3).then(res => {
                if(res.data.code==0){
                  this.$message.error(res.data.msg);
                }else{
                  let newData={
                    path:this.dir+this.$md5(item.file.name.split(".ipa")[0])+timeStamp+'.ipa'
                  }
                  let config2 = {
                    headers:{'token':localStorage.getItem('Authorization')}
                  };
                  axios.post(this.ipaParsing,newData,config2).then(res => {
                    if(res.data.code==0){
                      this.$message.error(res.data.msg);
                    }else{
                      // console.log(res.data)
                      this.display_name=res.data.data.display_name
                      this.path=res.data.data.url
                      this.icon=res.data.data.domain+res.data.data.icon
                      this.ipa_data_bak=res.data.data.ipa_data_bak
                      this.package_name=res.data.data.package_name
                      this.version_code=res.data.data.version_code
                      this.version_name=res.data.data.version_name
                      this.bundle_name=res.data.data.bundle_name
                      this.filesize=res.data.data.filesize
                      this.thirdInput=this.package_name
                      this.thirdInput1=this.display_name
                      this.thirdInput2=this.version_code
                      this.icon1=res.data.data.icon
                      this.active = 2
                      this.isSuper = false
                      this.isUpload = false
                      this.isSupplement=true
                    }
                  }, err => {
                    this.$message.error('上传ipa包失败');
                  })
                }
              }, err => {
                this.$message.error('上传ipa包失败');
              })
            }, err => {
              // console.log(err)
            })

你可以根据自己想要给后台传的值如下写就行了 formData.append('policy', res.data.data.policy)

data() {
    return {
        progressFlag:false, //进度条布尔值
        progressPercent:0, //进度条默认值
        customColor:'#ff355b',
       }
}