上传文件

最新推荐文章于 2023-09-25 13:05:59 发布

三人行，必有我师！！！

最新推荐文章于 2023-09-25 13:05:59 发布

阅读量180

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yangdl6/article/details/109430818

版权

vue 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

index.html

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>

<div class="submitFile pr cf">
                  <form id="form" ref="form" method="post" enctype="multipart/form-data">
                      <input type="file" id="file" name="file" @change="changefile()">
                  </form>
                  <el-button class="tiSub" round icon="el-icon-upload2">上传文件</el-button>

              </div>

// 通用文件上传接口
    changefile() {
        // this.$message({ message: "您的企业信息生成中，请耐心等待",duration: 4000});
        // 验签
        let senDataObj = {}
        var timestamp = (new Date()).valueOf();
        var AppId = 'PhjfApp';
        var Sign_AES_KEY = 'zWNjxzko2h2GbmFaRHxs';
        var ak =   F.commonFun.getmd5(AppId + Sign_AES_KEY + timestamp);
        senDataObj.ak = ak
        senDataObj.language = 'ZH_SIMP'
        senDataObj.timestamp = timestamp
        senDataObj.token = sessionStorage.getItem('token')
        senDataObj.user_uuid = sessionStorage.getItem('user_uuid')
        senDataObj.channel_code = sessionStorage.getItem('channel_code')
        senDataObj.bus_type = 'MerchantCompany'
        let Arr= []
        for (let val in senDataObj) {
            Arr.push(val)
        }
        Arr.sort()
        let obj = {}
        Arr.map((val, idx) => {
            obj[val] = senDataObj[val]
        })
        
        let str = ''
        for (let val in obj) {
            str += `${val}=${obj[val]}&`
        }
        str = str.slice(0,str.length-1)
        var md5_pkey1="xUB38uuxvazANVnAItqN";
        var keyVals =  F.commonFun.getmd5(md5_pkey1)
        var dataKeys = str+"&key="+keyVals
        
        var signs=  F.commonFun.getmd5(dataKeys).toUpperCase();
        str = str+"&sign="+signs

        var _this=this;
        $('#form').ajaxSubmit({
            url:baseURL+'/api/data/v1/file/uploadFile?'+str,
            dataType: 'application/json',
            type: 'post',
            async: false,
            success: function(data) {
                // console.log(data,"1")
            },
            error: function(data) {
                var response = JSON.parse(data.responseText);
                if(response.code == 1) {                                                     
                    const newFile={}
                    newFile.url=response.data.url
                    newFile.map_uuid = response.data.map_uuid
                    _this.fileList.push(newFile)
                    $('#file').val('');
                    // 上传完文件，根据上传文件保存参保人信息接口
                    _this.importCacheCompanyExcel(response.data.map_uuid);                                                                         
                }else if(response.code == 4){                                
                    _this.$router.push({ name: 'riskWarnLogin' })
                }else{
                    _this.$message({ message: response.msg,duration: 2000});
                }
            }
        });
    },

方法二：

<el-upload
                    class="upload-demo"
                    :http-request="uploadFun"
                    action="fakeaction"
                    :limit="1"
                    :file-list="fileList"
                    :show-file-list="false">
                    <el-button round icon="el-icon-upload2">点击上传</el-button>
                  </el-upload>

// 上传文件
    uploadFun(params){
      const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
      });
      const _file = params.file;
      var formData = new FormData();
      formData.append("file", _file);
      // 验签
        let senDataObj = {}
        var timestamp = (new Date()).valueOf();
        var AppId = 'PhjfApp';
        var Sign_AES_KEY = 'zWNjxzko2h2GbmFaRHxs';
        var ak =   F.commonFun.getmd5(AppId + Sign_AES_KEY + timestamp);
        senDataObj.ak = ak
        senDataObj.language = 'ZH_SIMP'
        senDataObj.timestamp = timestamp
        senDataObj.token = sessionStorage.getItem('token')
        senDataObj.user_uuid = sessionStorage.getItem('user_uuid')
        senDataObj.channel_code = sessionStorage.getItem('channel_code')
        senDataObj.bus_type = 'MerchantCompany'
        let Arr= []
        for (let val in senDataObj) {
            Arr.push(val)
        }
        Arr.sort()
        let obj = {}
        Arr.map((val, idx) => {
            obj[val] = senDataObj[val]
        })
        
        let str = ''
        for (let val in obj) {
            str += `${val}=${obj[val]}&`
        }
        str = str.slice(0,str.length-1)
        var md5_pkey1="xUB38uuxvazANVnAItqN";
        var keyVals =  F.commonFun.getmd5(md5_pkey1)
        var dataKeys = str+"&key="+keyVals
        
        var signs=  F.commonFun.getmd5(dataKeys).toUpperCase();
        str = str+"&sign="+signs

        axios.post(baseURL+'/api/data/v1/file/uploadFile?'+str, formData,{headers: {"content-type": "multipart/form-data"}}).then(res => {
          let endRes = res.data;
          if (endRes.code == "1") {
            const newFile={}
            newFile.url=endRes.data.url
            newFile.map_uuid = endRes.data.map_uuid
            this.fileList.push(newFile)
            this.importCacheCompanyExcel(endRes.data.map_uuid);
          } else if (endRes.data.code == 4 && endRes.data.msg == 'Auth Error') {
              this.$router.push({ name: 'riskWarnLogin' })
              sessionStorage.clear()
          } else { 
            this.$message({ message:endRes.data.msg,duration: 2000});  
          }
        }, err => {
          console.log(err)
          
        }).catch((error) => {
        console.log(error)
        })
    },