vue(四) vue上传文件携带数据中文加特殊字符乱码解决

心已赠人 2021-11-09 10:24 1576阅读 0赞

elementUI+vue作为前端

//说明:1.此处为elementUI框架，可以参看官网https://element.eleme.cn/#/zh-CN
     //2.`${uploadAction}`为es6语法获取变量值
    
    <el-upload
             //  :headers="$store.getters.requestHeaders" 这个可以不考虑 
                :action="`${uploadAction}&cityName=${uploadForm.cityName}&fileType=${uploadForm.fileType}&fileNote=${encodeURIComponent(uploadForm.fileNote)}&fileName=${encodeURIComponent(uploadForm.fileName)}&fileId=${uploadForm.fileId}
                  &fileKeyWords=${encodeURIComponent(uploadForm.fileKeyWords)}&fileResource=top10`"
                :before-upload="beforeUpload"
                multiple
                name="file"
                :accept="acceptUploadTypes"
                :limit="uploadCount"
                :on-exceed="handleExceed"
                :show-file-list="false"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                ref="upload"
              >
    
    action：上传文件的动作
    before-upload：上传前的钩子，可以对上传文件前的相关内容做校验
    limit：限制上传数量
    on-exceed：文件超过个数的限定判断
    show-file-list：是否展示文件列表
    on-succes：文件上传成功的钩子
    on-error：文件上传失败的钩子

**重点：encodeURIComponent（‘中文字符串’），可以对传入的参数中的各种数据进行编码。**

**后台：java**

**  java 对encodeURIComponent（""）这个方法编码的内容，本身就会自动使用一次解码，所以不需要在java后台再去解码**。