文件上传——将文件转成base64传给后端
文件上传转base64
·
文中例子为上传pdf
fileListFile:[]
页面代码:
<el-form-item label="上传pdf文件:" label-width="150px" prop="pdf">
<el-upload class="upload-demo" :multiple="false" accept='.pdf' action="#" :http-request="httpRequest" :on-change="handleChange" :before-upload="beforeUpload_u" :file-list="fileListFile" >
<el-button size="mini" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
转base64,可以不经过后台(action不指定地址),可上传。这样可以减少前后端的交互,减少服务器端无用的图片资源。
生成的base64编码的图片是2进制流,其优点是减少http的请求,缺点是不能跨域缓存
对应的方法。
//覆盖默认的上传行为,可以自定义上传的实现
httpRequest(data) {
// 调用转方法base64
this.getBase64(data.file).then(resBase64 => {
this.signForm.pdf = resBase64.split(',')[1]
})
this.$message.success('文件上传成功')
},
// 转base64码
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
let fileResult = '';
reader.readAsDataURL(file);
// 开始转
reader.onload = () => {
fileResult = reader.result;
}
// 转 失败
reader.onerror = (error) => {
reject(error)
}
// 转 结束
reader.onloadend = () => {
resolve(fileResult)
}
})
},
//文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
//上传文件让第二次覆盖第一的文件
handleChange(file,fileList){
if (fileList.length>0) {
this.fileListFile=[fileList[fileList.length-1]]
}
},
//上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
beforeUpload_u(file, fileList){
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'pdf'
var bool = false;
if(extension){
bool = true;
} else{
bool = false;
}
if(!extension) {
this.$confirm(`上传文件只能是pdf格式!`);
}
return bool;
},
更多推荐
已为社区贡献4条内容
所有评论(0)