转载自: 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>
上传文件原本获取到的数据和想要实现的效果
最最最重要的是下面这个方法(百度),把获取的的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)
};
},