需求(有点类似于头像上传功能)是这样的:
1.页面初始上传栏要有默认图片
2.点击默认图片选择文件夹上传或从本地拖拽图片至上传栏进行上传
3.上传栏图片替换成新的图片
3.延迟上传图片,与表单数据一起发送到后端
4.图片有且只能有一张
还在用jquery的小伙伴可以直接用dropify插件,可以轻松实现上述功能这里是dropify源码https://gitee.com/mirrors/Dropify
然后我自己这边尝试了了element-ui实现了一样的功能
<template>
<div>
<el-row :gutter="20">
<el-col :span="24">
<el-upload
ref="upload"
:accept="upload.headers.accept"
:multiple="true"
:headers="upload.headers"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-error="handelFileError"
:on-preview="handlePreview"
:auto-upload="false"
:on-change="handleChange"
:on-remove="handleRemove"
:action="baseUrl+src+'?updateSupport='+upload.updateSupport"
:data="upload.fileData"
:file-list="upload.fileList"
:show-file-list="false"
drag
>
<el-image v-if="imageUrl" fit="fill" :src="imageUrl"></el-image>
<el-image v-else fit="fill" src="/assets/images/default-image-not-found.jpg"></el-image>
</el-upload>
</el-col>
<el-col :span="24">
<el-form ref="form" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="描述" prop="materialMemo">
<el-input v-model="formData.imglMemo" placeholder="请输入内容"/>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</div>
</template>
<script>
import { addInfo, updateInfo} from "@/api/info";
import {getToken} from "@/utils/auth";
export default {
name: "addOrEdit",
data() {
return {
// 遮罩层
loading: true,
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 弹出层标题
title: "",
//图片上传路径
src: '/material/info/image',
baseUrl: process.env.VUE_APP_BASE_API,
// 是否显示弹出层
visible: false,
//判断图片栏里是否有图片
isFileForUpload: false,
//判断是否上传图片成功
isUploadSuccess: false,
//上传后返回的图片名
picName: undefined,
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
imageUrl:'',
},
// 表单参数
formData: {
imageSrc: null,
imglMemo:null,
},
upload: {
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
//警告信息
warningMsg: "",
//可解释文件类型
accept: "",
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
fileData:{materialId:""},
fileList: [],
},
// 表单校验
rules: {}
};
},
created() {
},
methods: {
// 取消按钮
close() {
this.visible = false;
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.formData.id != null) {
//无论是否上传成功,修改继续
updateInfo(this.formData).then(response => {
this.msgSuccess("修改成功");
if (this.isFileForUpload) {
this.submitFileForm();
}
this.close();
});
} else {
//上传图片为异步,因此先新增再上传图片及保存图片路径
addInfo(this.formData).then(response => {//新增物料信息
this.msgSuccess("新增成功");
if (this.isFileForUpload) {
this.submitFileForm();
}
this.close();
});
}
}
});
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
console.info(response)
this.upload.isUploading = false;
if (response.code === 200) {
this.msgSuccess("图片上传成功!");
} else {
this.msgError(response.msg)
}
},
handelFileError(response, file, fileList) {
this.msgError(response.msg)
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
//上传图片值改变 判读是否有值
handleChange(file, fileList) {
console.log(file.raw);
this.imageUrl = URL.createObjectURL(file.raw);//变更展示图片
if (typeof fileList != "undefined" && fileList.length > 0) {
this.isFileForUpload = true;
this.upload.fileList = fileList;
} else {
this.isFileForUpload = false;
}
if (fileList.length > 1) {//只允许有一张图片
fileList.splice(0, 1);
}
},
//值被清空
handleRemove(file, fileList) {
this.isFileForUpload = false;
},
handlePreview(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
}
};
</script>
<style>
.el-upload-dragger {
/*background-color: #fff;*/
/*border: 1px dashed #d9d9d9;*/
/*border-radius: 6px;*/
/*box-sizing: border-box;*/
/*text-align: center;*/
/*position: relative;*/
/*overflow: hidden;*/
width: 100%;//上传框的样式,原始默认的写死了大小,可以依据需求修改
height: 100%;
}
</style>