一、自定义上传
使用http-request实现自定义上传
<el-form-item prop="imageUrl" label="二维码:">
<el-upload
class="avatar-uploader"
ref="er"
action="#"
:show-file-list="false"
:http-request="Upload"
:on-change="
(file, fileList) => {
change(file, fileList)
}
"
>
<img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
注意:使用自定义上传,on-success无效,所以改用on-change
export default {
name: "Form",
data () {
return {
Form: {
imageUrl: '',//二维码
},
formData: new FormData(),
file: {},//二维码
};
},
created () {
this.getform()
},
methods: {
// 更新二维码
Upload (param) {
this.formData.append("file", param.file);
upcode(this.formData).then((res) => {
console.log(res)
this.Form.imageUrl = res.data
// this.Form.imageUrl = URL.createObjectURL(param.file)
this.$message.success(res.message);
});
},
change (file, fileList) {
const isJPEG = file.raw.type === 'image/jpeg'
const isPNG = file.raw.type === 'image/png'
const isJPG = file.raw.type === 'image/jpg'
const isGIF = file.raw.type === 'image/GIF'
const isLt2M = file.size / 1024 / 1024 < 10;
if (!(isJPEG || isPNG || isJPG || isGIF)) {
this.$message.error('上传图片只能是 JPEG/PNG/JPG/GIF 格式!')
} else if (!isLt2M) {
this.$message.error("上传图片大小不能超过 10MB!");
}
if (fileList.length > 1) {
fileList.splice(0, 1)
}
},
}
}
二、手动上传
使用auto-upload取消立即上传
<el-form-item prop="image9" label="拼图9:">
<el-upload
class="avatar-uploader"
ref="image9"
action="#"
:show-file-list="false"
:auto-upload="false"
:on-change="
(file, fileList) => {
change9(file, fileList)
}
"
>
<img v-if="Form.image9" :src="Form.image9" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button type="primary" @click="cancel">重置</el-button>
</el-form-item>
export default {
name: "Form",
data () {
return {
Form: {
image9: '',//二维码
},
formData: new FormData(),
file9: {},//二维码
};
},
created () {
this.getform()
},
methods: {
// 碎片图片9
change9 (file, fileList) {
const isJPEG = file.raw.type === 'image/jpeg'
const isPNG = file.raw.type === 'image/png'
const isJPG = file.raw.type === 'image/jpg'
const isGIF = file.raw.type === 'image/GIF'
const isLt2M = file.size / 1024 / 1024 < 10;
if (!(isJPEG || isPNG || isJPG || isGIF)) {
this.$message.error('上传图片只能是 JPEG/PNG/JPG/GIF 格式!')
} else if (!isLt2M) {
this.$message.error("上传图片大小不能超过 10MB!");
}
if (fileList.length > 1) {
fileList.splice(0, 1)
}
// console.log(file);
if (file.status === "ready") {
this.Form.image9 = URL.createObjectURL(file.raw)
this.file9 = file.raw
}
},
// 提交
async onSubmit () {
this.$refs.Form.validate(async (isok) => {
if (isok) {
// 提交编辑
// console.log(this.Form);
const res = await setTime(this.Form);//时间
console.log(res)
// 拼图9
this.formData.append("file", this.file9);
upcode(this.formData).then((res) => {
console.log(res)
this.Form.image9 = res.data
});
this.$message.success(res.message);
}
// this.DetailTaskList();
});
},
}
}