| | |
|---|
| | | <template>
|
|---|
| | | <div class="component-upload-image">
|
|---|
| | | <el-upload
|
|---|
| | | multiple
|
|---|
| | | :action="uploadImgUrl"
|
|---|
| | | list-type="picture-card"
|
|---|
| | | :on-success="handleUploadSuccess"
|
|---|
| | |
|---|
| | | },
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | number: 0,
|
|---|
| | | uploadList: [],
|
|---|
| | | dialogImageUrl: "",
|
|---|
| | | dialogVisible: false,
|
|---|
| | | hideUpload: false,
|
|---|
| | |
|---|
| | | // 删除图片
|
|---|
| | | handleRemove(file, fileList) {
|
|---|
| | | const findex = this.fileList.map(f => f.name).indexOf(file.name);
|
|---|
| | | this.fileList.splice(findex, 1);
|
|---|
| | | this.$emit("input", this.listToString(this.fileList));
|
|---|
| | | if(findex > -1) {
|
|---|
| | | this.fileList.splice(findex, 1);
|
|---|
| | | this.$emit("input", this.listToString(this.fileList));
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 上传成功回调
|
|---|
| | | handleUploadSuccess(res) {
|
|---|
| | | this.fileList.push({ name: res.fileName, url: res.fileName });
|
|---|
| | | this.$emit("input", this.listToString(this.fileList));
|
|---|
| | | this.loading.close();
|
|---|
| | | this.uploadList.push({ name: res.fileName, url: res.fileName });
|
|---|
| | | if (this.uploadList.length === this.number) {
|
|---|
| | | this.fileList = this.fileList.concat(this.uploadList);
|
|---|
| | | this.uploadList = [];
|
|---|
| | | this.number = 0;
|
|---|
| | | this.$emit("input", this.listToString(this.fileList));
|
|---|
| | | this.$modal.closeLoading();
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 上传前loading加载
|
|---|
| | | handleBeforeUpload(file) {
|
|---|
| | |
|---|
| | | }
|
|---|
| | |
|
|---|
| | | if (!isImg) {
|
|---|
| | | this.$message.error(
|
|---|
| | | `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
|
|---|
| | | );
|
|---|
| | | this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
|
|---|
| | | return false;
|
|---|
| | | }
|
|---|
| | | if (this.fileSize) {
|
|---|
| | | const isLt = file.size / 1024 / 1024 < this.fileSize;
|
|---|
| | | if (!isLt) {
|
|---|
| | | this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
|---|
| | | this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
|
|---|
| | | return false;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | this.loading = this.$loading({
|
|---|
| | | lock: true,
|
|---|
| | | text: "上传中",
|
|---|
| | | background: "rgba(0, 0, 0, 0.7)",
|
|---|
| | | });
|
|---|
| | | this.$modal.loading("正在上传图片，请稍候...");
|
|---|
| | | this.number++;
|
|---|
| | | },
|
|---|
| | | // 文件个数超出
|
|---|
| | | handleExceed() {
|
|---|
| | | this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
|
|---|
| | | this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
|
|---|
| | | },
|
|---|
| | | // 上传失败
|
|---|
| | | handleUploadError() {
|
|---|
| | | this.$message({
|
|---|
| | | type: "error",
|
|---|
| | | message: "上传失败",
|
|---|
| | | });
|
|---|
| | | this.loading.close();
|
|---|
| | | this.$modal.msgError("上传图片失败，请重试");
|
|---|
| | | this.$modal.closeLoading();
|
|---|
| | | },
|
|---|
| | | // 预览
|
|---|
| | | handlePictureCardPreview(file) {
|
|---|
