自己写的文件上传files
Posted zmdblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己写的文件上传files相关的知识，希望对你有一定的参考价值。
做法：
本地图片上传后，把上传的图片转为base64，和表单数据一起提交
成品：
<el-form-item label="公司LOGO" prop="url">
<el-image
v-if="this.isDisabled"
style="width: 114px; height: 114px"
:src="formShow.logoImg"
class="img-avatar"
fit="fill"
>
<div slot="error" class="image-slot">暂无</div>
</el-image>
<div v-else>
<div class="avatar-uploader" @click="uploadFile">
<div class="el-upload el-upload--text">
<img v-if="formShow.logoImg" :src="formShow.logoImg" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<input
@change="onFileChange"
type="file"
id="upload"
name="file"
class="el-upload__input"
/>
</div>
</div>
</div>
</el-form-item>
blobToDataURL(blob, cb) {
let reader = new FileReader();
reader.onload = function(evt) {
var base64 = evt.target.result;
cb(base64);
};
reader.readAsDataURL(blob);
},
onFileChange(e) {
let type = e.target.files[0].type.split("/")[1];
const file = e.target.files[0];
if (file === undefined) {
return;
}
const result = /(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(type);
if (result && file.size<=100*1024) {
this.blobToDataURL(e.target.files[0], res => {
this.formShow.logoImg = res;
});
this.isUploaded = true;
document.getElementById("upload").value = null;
} else if(file.size>100*1024) {
this.$message.error("上传图片不能超过100k,请重新上传")
}else{
this.$message.error("图片类型必须是.gif,jpeg,jpg,png中的一种");
}
},
uploadFile() {
document.getElementById("upload").click();
},
css 代码：
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 114px;
height: 114px;
line-height: 114px;
text-align: center;
}
.avatar {
width: 114px;
height: 114px;
display: block;
}
.img-avatar /deep/ .image-slot {
width: 114px;
height: 114px;
line-height: 114px;
text-align: center;
background: #f5f7fa;
color: #c0c4cc;
}
文件上传中的e.target.files[0].size中size的单位是byte，1024byte = 1kb
img标签的url属性可以直接解析base64
以上是关于自己写的文件上传files的主要内容，如果未能解决你的问题，请参考以下文章