|
|
@@ -1,193 +1,198 @@
|
|
|
<template>
|
|
|
- <div class="nut-uploader">
|
|
|
- <slot></slot>
|
|
|
- <input type="file" :name="name" @change="upload($event)" class="uploader" :multiple="multiple">
|
|
|
- </div>
|
|
|
+ <div class="nut-uploader">
|
|
|
+ <slot></slot>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ :name="name"
|
|
|
+ @change="upload($event)"
|
|
|
+ class="uploader"
|
|
|
+ :multiple="multiple"
|
|
|
+ :disabled="disabled"
|
|
|
+ :accept="acceptType"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Uploader from "../../utils/uploader.js";
|
|
|
import locale from "../../mixins/locale";
|
|
|
export default {
|
|
|
- name: "nut-uploader",
|
|
|
- mixins: [locale],
|
|
|
- props: {
|
|
|
- name: {
|
|
|
- type: String,
|
|
|
- default: ""
|
|
|
- },
|
|
|
- url: {
|
|
|
- type: String,
|
|
|
- default: ""
|
|
|
- },
|
|
|
- multiple: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- isPreview: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- maxSize: {
|
|
|
- type: Number,
|
|
|
- default: 5242880
|
|
|
- },
|
|
|
- acceptType: {
|
|
|
- type: Array,
|
|
|
- default() {
|
|
|
- return ["image/jpeg", "image/png", "image/gif", "image/bmp"];
|
|
|
- }
|
|
|
- },
|
|
|
- selfData:{
|
|
|
- type:Object,
|
|
|
- default(){
|
|
|
- return {}
|
|
|
- }
|
|
|
- },
|
|
|
- attach: {
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
- return {};
|
|
|
- }
|
|
|
+ name: "nut-uploader",
|
|
|
+ mixins: [locale],
|
|
|
+ props: {
|
|
|
+ name: {
|
|
|
+ type: String,
|
|
|
+ default: "file"
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ multiple: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ isPreview: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ maxSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 5242880
|
|
|
+ },
|
|
|
+ acceptType: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return ["image/jpeg", "image/png", "image/gif", "image/bmp"];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selfData: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ attach: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ headers: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeUpload: {
|
|
|
+ type: Function
|
|
|
+ },
|
|
|
+ xhrState: {
|
|
|
+ type: Number,
|
|
|
+ default: 200
|
|
|
+ },
|
|
|
+ clearInput: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ xmlError: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ typeError: {
|
|
|
+ type: String,
|
|
|
+ default: "不支持上传该类型文件"
|
|
|
+ },
|
|
|
+ limitError: {
|
|
|
+ type: String,
|
|
|
+ default: "对不起，您的浏览器不支持本组件"
|
|
|
+ },
|
|
|
+ withCredentials: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
},
|
|
|
- headers:{
|
|
|
- type: Object,
|
|
|
- default() {
|
|
|
+ data() {
|
|
|
return {};
|
|
|
- }
|
|
|
- },
|
|
|
- changeEvtCallback: {
|
|
|
- type: Function
|
|
|
- },
|
|
|
- beforeUpload:{
|
|
|
- type: Function
|
|
|
- },
|
|
|
- xhrState: {
|
|
|
- type: Number,
|
|
|
- default: 200
|
|
|
- },
|
|
|
- clearInput: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- xmlError: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- typeError: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- limitError: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- withCredentials: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
- methods: {
|
|
|
- createUploaderOpts() {
|
|
|
- const _this = this;
|
|
|
- return {
|
|
|
- $el: {},
|
|
|
- url: this.url, //图片上传地址
|
|
|
- formData: null,
|
|
|
- headers: {}, //自定义headers
|
|
|
- isPreview: this.isPreview, //是否开启本地预览
|
|
|
- previewData: null,
|
|
|
- maxSize: this.maxSize, //允许上传的文件最大字节
|
|
|
- acceptType: this.acceptType, //允许上传的文件类型
|
|
|
- xhrState: this.xhrState,
|
|
|
- clearInput: this.clearInput,
|
|
|
- withCredentials: this.withCredentials,//支持发送 cookie 凭证信息
|
|
|
- xmlError: this.xmlError || this.nutTranslate('lang.uploader.xmlError'),
|
|
|
- typeError: this.typeError || this.nutTranslate('lang.uploader.typeError'),
|
|
|
- limitError: this.limitError || this.nutTranslate('lang.uploader.limitError'),
|
|
|
- onStart() {
|
|
|
- _this.$emit("start");
|
|
|
- },
|
|
|
- onProgress(file, loaded, total) {
|
|
|
- _this.$emit("progress", file, loaded, total);
|
|
|
- },
|
|
|
- onPreview(previewFile) {
|
|
|
- _this.$emit("preview", previewFile);
|
|
|
- },
|
|
|
- onSuccess(file, responseTxt) {
|
|
|
- _this.$emit("success", file, responseTxt);
|
|
|
- },
|
|
|
- onFailure(file, responseTxt) {
|
|
|
- _this.$emit("failure", file, responseTxt);
|
|
|
- }
|
|
|
- };
|
|
|
},
|
|
|
- uploadData($event,selfData={}){
|
|
|
- const tar = $event.target;
|
|
|
- if (!this.url) {
|
|
|
- this.$emit("showMsg", "请先配置上传url");
|
|
|
- this.$emit("afterChange", tar, $event);
|
|
|
- return;
|
|
|
- }
|
|
|
- const formData = new FormData();
|
|
|
- const opt = this.createUploaderOpts();
|
|
|
- opt.$el = tar;
|
|
|
- if (this.isPreview) {
|
|
|
- opt.previewData = tar.files[0];
|
|
|
- }
|
|
|
- if (this.multiple) {
|
|
|
- for (let i = 0; i < tar.files.length; i++) {
|
|
|
- if (tar.files[i]) {
|
|
|
- if (this.acceptType.indexOf(tar.files[i].type) == -1) {
|
|
|
- this.$emit("showMsg", opt.typeError);
|
|
|
- return;
|
|
|
+ methods: {
|
|
|
+ createUploaderOpts() {
|
|
|
+ const _this = this;
|
|
|
+ return {
|
|
|
+ $el: {},
|
|
|
+ url: this.url, //图片上传地址
|
|
|
+ formData: null,
|
|
|
+ headers: {}, //自定义headers
|
|
|
+ isPreview: this.isPreview, //是否开启本地预览
|
|
|
+ previewData: null,
|
|
|
+ maxSize: this.maxSize, //允许上传的文件最大字节
|
|
|
+ acceptType: this.acceptType, //允许上传的文件类型
|
|
|
+ xhrState: this.xhrState,
|
|
|
+ clearInput: this.clearInput,
|
|
|
+ withCredentials: this.withCredentials, //支持发送 cookie 凭证信息
|
|
|
+ xmlError:
|
|
|
+ this.xmlError ||
|
|
|
+ this.nutTranslate("lang.uploader.xmlError"),
|
|
|
+ typeError:
|
|
|
+ this.typeError ||
|
|
|
+ this.nutTranslate("lang.uploader.typeError"),
|
|
|
+ limitError:
|
|
|
+ this.limitError ||
|
|
|
+ this.nutTranslate("lang.uploader.limitError"),
|
|
|
+ onStart() {
|
|
|
+ _this.$emit("start");
|
|
|
+ },
|
|
|
+ onProgress(file, loaded, total) {
|
|
|
+ _this.$emit("progress", file, loaded, total);
|
|
|
+ },
|
|
|
+ onPreview(previewFile) {
|
|
|
+ debugger
|
|
|
+ _this.$emit("preview", previewFile);
|
|
|
+ },
|
|
|
+ onSuccess(file, responseTxt) {
|
|
|
+ _this.$emit("success", file, responseTxt);
|
|
|
+ },
|
|
|
+ onFailure(file, responseTxt) {
|
|
|
+ _this.$emit("failure", file, responseTxt);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ uploadData($event, selfData = {}) {
|
|
|
+ const tar = $event.target;
|
|
|
+ if (!this.url) {
|
|
|
+ this.$emit("showMsg", "请先配置上传url");
|
|
|
+ this.$emit("afterChange", tar, $event);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+ const opt = this.createUploaderOpts();
|
|
|
+ opt.$el = tar;
|
|
|
+ if (this.isPreview) {
|
|
|
+ debugger
|
|
|
+ opt.previewData = tar.files;
|
|
|
+ }
|
|
|
+ let len = this.multiple ? tar.files.length : 1;
|
|
|
+ formData.append(tar.name, tar.files[0]);
|
|
|
+ for (const key of Object.keys(this.attach)) {
|
|
|
+ formData.append(key, this.attach[key]);
|
|
|
+ }
|
|
|
+ const finialyOutData = Object.assign(this.selfData, selfData);
|
|
|
+ if (finialyOutData) {
|
|
|
+ for (const key in finialyOutData) {
|
|
|
+ formData.append(key, finialyOutData[key]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ opt.formData = formData;
|
|
|
+ opt.headers = this.headers || {};
|
|
|
+ opt.showMsgFn = (msg) => {
|
|
|
+ this.$emit("showMsg", msg);
|
|
|
+ };
|
|
|
+ new Uploader(opt);
|
|
|
+ this.$emit("afterChange", tar, $event);
|
|
|
+ },
|
|
|
+ async upload($event) {
|
|
|
+ if (typeof this.beforeUpload === "function") {
|
|
|
+ const promise = new Promise((reslove, reject) => {
|
|
|
+ reslove(this.beforeUpload($event));
|
|
|
+ });
|
|
|
+ const resData = await promise;
|
|
|
+ if (
|
|
|
+ typeof resData === "object" &&
|
|
|
+ typeof resData.event === "object"
|
|
|
+ ) {
|
|
|
+ this.uploadData(resData.event, resData.data);
|
|
|
+ } else {
|
|
|
+ console.warn(
|
|
|
+ "resData： 必须包含 event字段且为input $event 的事件对象"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.uploadData($event);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (tar.files[0]) {
|
|
|
- if (this.acceptType.indexOf(tar.files[0].type) == -1) {
|
|
|
- this.$emit("showMsg", opt.typeError);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- formData.append(tar.name, tar.files[0]);
|
|
|
- for (let key of Object.keys(this.attach)) {
|
|
|
- formData.append(key, this.attach[key]);
|
|
|
- }
|
|
|
- let finialyOutData = Object.assign(this.selfData,selfData);
|
|
|
- if(finialyOutData){
|
|
|
- for(let key in finialyOutData){
|
|
|
- formData.append(key, finialyOutData[key]);
|
|
|
- }
|
|
|
- }
|
|
|
- opt.formData = formData;
|
|
|
- opt.headers = this.headers || {};
|
|
|
- opt.showMsgFn = msg => {
|
|
|
- this.$emit("showMsg", msg);
|
|
|
- };
|
|
|
- new Uploader(opt);
|
|
|
- this.$emit("afterChange", tar, $event);
|
|
|
- },
|
|
|
- async upload($event) {
|
|
|
- if(typeof this.beforeUpload === 'function'){
|
|
|
- let promise =new Promise((reslove,reject)=>{
|
|
|
- reslove(this.beforeUpload($event))
|
|
|
- })
|
|
|
- let resData = await promise;
|
|
|
- if(typeof resData === 'object' && typeof resData.event === 'object'){
|
|
|
- this.uploadData(resData.event,resData.data)
|
|
|
- }else{
|
|
|
- console.warn('resData： 必须包含 event字段且为input $event 的事件对象')
|
|
|
}
|
|
|
-
|
|
|
- }else{
|
|
|
- this.uploadData($event)
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
};
|
|
|
-</script>
|
|
|
+</script>
|
lilinsen