Authored by zhangwenxue

feat: make drag-file-upload support pdf file type

... ... @@ -7,23 +7,26 @@
:progress="uploadList[0].showProgress"
:percentage="uploadList[0].percentage"
:remove="true"
@remove-image="handleRemove"></image-purview>
@remove-image="handleRemove"
></image-purview>
<div class="upload-box" v-show="!uploadList[0]">
<Upload ref="upload"
<div v-show="!uploadList[0]" class="upload-box">
<Upload
ref="upload"
:show-upload-list="false"
:data="{bucket: bucket}"
:data="{ bucket: bucket }"
:on-success="handleSuccess"
:on-error="handleError"
:default-file-list="defaultList"
:format="['jpg','jpeg','png']"
:format="format"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
action="/Api/upload/image">
<Icon type="ios-cloud-upload-outline" title="上传图片"></Icon>
action="/Api/upload/image"
>
<Icon type="ios-cloud-upload-outline" :title="uploadIconTitle"></Icon>
</Upload>
<Icon type="ios-cloud-outline" v-if="skn" title="调用图片服务" @click.native="browseOnline"></Icon>
<Icon v-if="skn" type="ios-cloud-outline" title="调用图片服务" @click.native="browseOnline"></Icon>
</div>
<modal-skn-image v-model="sknImageModel" :skn="skn" @selected="selected"></modal-skn-image>
... ... @@ -33,13 +36,13 @@
import _ from 'lodash';
export default {
name: 'drag-file-upload',
name: 'DragFileUpload',
props: {
id: {
type: Object
type: Object,
},
defaultFile: {
type: String
type: String,
},
skn: {
type: [String, Number],
... ... @@ -48,11 +51,27 @@ export default {
type: String,
default() {
return 'goodsimg';
}
}
},
},
format: {
type: Array,
default() {
return ['jpg', 'jpeg', 'png'];
},
},
formatErrMsg: {
type: Function,
default() {
return file => `文件 ${file.name} 格式不正确,请上传 jpg 或 png 格式的图片。`;
},
},
uploadIconTitle: {
type: String,
default: '上传图片',
},
},
data() {
let _this = this;
const _this = this;
return {
imgUrl: '',
... ... @@ -60,17 +79,27 @@ export default {
show: true,
sknImageModel: false,
uploadList: [],
defaultList: _this.defaultFile ? [{url: _this.defaultFile}] : []
defaultList: _this.defaultFile ? [{ url: _this.defaultFile }] : [],
};
},
watch: {
defaultFile(newValue) {
if (newValue) {
this.defaultList = [{ url: newValue }];
}
},
},
mounted() {
this.uploadList = this.$refs.upload.fileList;
},
methods: {
handleView(url) {
this.imgUrl = url;
this.visible = true;
},
handleRemove() {
let file = this.uploadList[0];
let files = this.$refs.upload.fileList;
const file = this.uploadList[0];
const files = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(files.indexOf(file), 1);
this.uploadList = this.$refs.upload.fileList;
... ... @@ -91,38 +120,26 @@ export default {
handleFormatError(file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg 或 png 格式的图片。'
desc: this.formatErrMsg(file),
});
},
handleMaxSize(file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
desc: '文件 ' + file.name + ' 太大,不能超过 2M。',
});
},
browseOnline() {
this.sknImageModel = true;
},
selected(url) {
this.uploadList = this.defaultList = [{url}];
this.$emit('success', this.id, {url});
this.uploadList = this.defaultList = [{ url }];
this.$emit('success', this.id, { url });
},
},
mounted() {
this.uploadList = this.$refs.upload.fileList;
},
watch: {
defaultFile: function(newValue) {
if (newValue) {
this.defaultList = [{url: newValue}];
}
}
}
};
</script>
<style lang="scss">
.upload-box {
width: 100px;
height: 100px;
... ...