转载自: uniapp-6.上传文件之后file转base64

前提: 项目需要,表单中有上传附件这一操作,但是不是即刻上传,而是填完表加上传文件整合到一起,点击提交才访问接口的,而其中的文件后台需要传过去的是一个base64的编码格式

用到的组件是:uni-file-picker

<uni-file-picker title="最多选择4个文件" limit="4" :auto-upload="false" file-mediatype="all" @select="selectFile"></uni-file-picker>

上传文件原本获取到的数据和想要实现的效果

上传.png

最最最重要的是下面这个方法(百度),把获取的的file,根据上图也就是tempFilesp[0].file

fileByBase64(file, callback){
    var reader = new FileReader();
    // 传入一个参数对象即可得到基于该参数对象的文本内容
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        // target.result 该属性表示目标对象的DataURL
        console.log(e.target.result);
        callback(e.target.result)
    };
},

完整代码就是

   <uni-file-picker @select="selectFile" title="最多选择4个文件" limit="4" :auto-upload="false" file-mediatype="all" ></uni-file-picker>

    // 方法
   selectFile(params){
        params.tempFiles.forEach(item=>{
            this.fileByBase64(item.file, (base64) => {
                // 这里的base64就是对应的file转成的base64编码
            })
       })
    },
 fileByBase64(file, callback){
        var reader = new FileReader();
        // 传入一个参数对象即可得到基于该参数对象的文本内容
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            // target.result 该属性表示目标对象的DataURL
            console.log(e.target.result);
            callback(e.target.result)
        };
    },