596 lines
16 KiB
JavaScript
596 lines
16 KiB
JavaScript
|
"use strict";
|
|||
|
var __defProp = Object.defineProperty;
|
|||
|
var __defProps = Object.defineProperties;
|
|||
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|||
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|||
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|||
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|||
|
var __spreadValues = (a, b) => {
|
|||
|
for (var prop in b || (b = {}))
|
|||
|
if (__hasOwnProp.call(b, prop))
|
|||
|
__defNormalProp(a, prop, b[prop]);
|
|||
|
if (__getOwnPropSymbols)
|
|||
|
for (var prop of __getOwnPropSymbols(b)) {
|
|||
|
if (__propIsEnum.call(b, prop))
|
|||
|
__defNormalProp(a, prop, b[prop]);
|
|||
|
}
|
|||
|
return a;
|
|||
|
};
|
|||
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|||
|
var __async = (__this, __arguments, generator) => {
|
|||
|
return new Promise((resolve, reject) => {
|
|||
|
var fulfilled = (value) => {
|
|||
|
try {
|
|||
|
step(generator.next(value));
|
|||
|
} catch (e) {
|
|||
|
reject(e);
|
|||
|
}
|
|||
|
};
|
|||
|
var rejected = (value) => {
|
|||
|
try {
|
|||
|
step(generator.throw(value));
|
|||
|
} catch (e) {
|
|||
|
reject(e);
|
|||
|
}
|
|||
|
};
|
|||
|
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|||
|
step((generator = generator.apply(__this, __arguments)).next());
|
|||
|
});
|
|||
|
};
|
|||
|
const common_vendor = require("../../../common/vendor.js");
|
|||
|
const sheep_components_sUploader_chooseAndUploadFile = require("./choose-and-upload-file.js");
|
|||
|
const sheep_components_sUploader_utils = require("./utils.js");
|
|||
|
const sheep_index = require("../../index.js");
|
|||
|
const uploadImage = () => "./upload-image.js";
|
|||
|
const uploadFile = () => "./upload-file.js";
|
|||
|
const _sfc_main = {
|
|||
|
name: "sUploader",
|
|||
|
components: {
|
|||
|
uploadImage,
|
|||
|
uploadFile
|
|||
|
},
|
|||
|
options: {
|
|||
|
virtualHost: true
|
|||
|
},
|
|||
|
emits: ["select", "success", "fail", "progress", "delete", "update:modelValue", "update:url"],
|
|||
|
props: {
|
|||
|
modelValue: {
|
|||
|
type: [Array, Object],
|
|||
|
default() {
|
|||
|
return [];
|
|||
|
}
|
|||
|
},
|
|||
|
url: {
|
|||
|
type: [Array, String],
|
|||
|
default() {
|
|||
|
return [];
|
|||
|
}
|
|||
|
},
|
|||
|
disabled: {
|
|||
|
type: Boolean,
|
|||
|
default: false
|
|||
|
},
|
|||
|
disablePreview: {
|
|||
|
type: Boolean,
|
|||
|
default: false
|
|||
|
},
|
|||
|
delIcon: {
|
|||
|
type: Boolean,
|
|||
|
default: true
|
|||
|
},
|
|||
|
// 自动上传
|
|||
|
autoUpload: {
|
|||
|
type: Boolean,
|
|||
|
default: true
|
|||
|
},
|
|||
|
// 最大选择个数 ,h5只能限制单选或是多选
|
|||
|
limit: {
|
|||
|
type: [Number, String],
|
|||
|
default: 9
|
|||
|
},
|
|||
|
// 列表样式 grid | list | list-card
|
|||
|
mode: {
|
|||
|
type: String,
|
|||
|
default: "grid"
|
|||
|
},
|
|||
|
// 选择文件类型 image/video/all
|
|||
|
fileMediatype: {
|
|||
|
type: String,
|
|||
|
default: "image"
|
|||
|
},
|
|||
|
// 文件类型筛选
|
|||
|
fileExtname: {
|
|||
|
type: [Array, String],
|
|||
|
default() {
|
|||
|
return [];
|
|||
|
}
|
|||
|
},
|
|||
|
title: {
|
|||
|
type: String,
|
|||
|
default: ""
|
|||
|
},
|
|||
|
listStyles: {
|
|||
|
type: Object,
|
|||
|
default() {
|
|||
|
return {
|
|||
|
// 是否显示边框
|
|||
|
border: true,
|
|||
|
// 是否显示分隔线
|
|||
|
dividline: true,
|
|||
|
// 线条样式
|
|||
|
borderStyle: {}
|
|||
|
};
|
|||
|
}
|
|||
|
},
|
|||
|
imageStyles: {
|
|||
|
type: Object,
|
|||
|
default() {
|
|||
|
return {
|
|||
|
width: "auto",
|
|||
|
height: "auto"
|
|||
|
};
|
|||
|
}
|
|||
|
},
|
|||
|
readonly: {
|
|||
|
type: Boolean,
|
|||
|
default: false
|
|||
|
},
|
|||
|
sizeType: {
|
|||
|
type: Array,
|
|||
|
default() {
|
|||
|
return ["original", "compressed"];
|
|||
|
}
|
|||
|
},
|
|||
|
driver: {
|
|||
|
type: String,
|
|||
|
default: "local"
|
|||
|
// local=本地 | oss | unicloud
|
|||
|
},
|
|||
|
subtitle: {
|
|||
|
type: String,
|
|||
|
default: ""
|
|||
|
}
|
|||
|
},
|
|||
|
data() {
|
|||
|
return {
|
|||
|
files: [],
|
|||
|
localValue: [],
|
|||
|
imgsrc: sheep_index.sheep.$url.static("/static/img/shop/upload-camera.png")
|
|||
|
};
|
|||
|
},
|
|||
|
watch: {
|
|||
|
modelValue: {
|
|||
|
handler(newVal, oldVal) {
|
|||
|
this.setValue(newVal, oldVal);
|
|||
|
},
|
|||
|
immediate: true
|
|||
|
}
|
|||
|
},
|
|||
|
computed: {
|
|||
|
returnType() {
|
|||
|
if (this.limit > 1) {
|
|||
|
return "array";
|
|||
|
}
|
|||
|
return "object";
|
|||
|
},
|
|||
|
filesList() {
|
|||
|
let files = [];
|
|||
|
this.files.forEach((v) => {
|
|||
|
files.push(v);
|
|||
|
});
|
|||
|
return files;
|
|||
|
},
|
|||
|
showType() {
|
|||
|
if (this.fileMediatype === "image") {
|
|||
|
return this.mode;
|
|||
|
}
|
|||
|
return "list";
|
|||
|
},
|
|||
|
limitLength() {
|
|||
|
if (this.returnType === "object") {
|
|||
|
return 1;
|
|||
|
}
|
|||
|
if (!this.limit) {
|
|||
|
return 1;
|
|||
|
}
|
|||
|
if (this.limit >= 9) {
|
|||
|
return 9;
|
|||
|
}
|
|||
|
return this.limit;
|
|||
|
}
|
|||
|
},
|
|||
|
created() {
|
|||
|
if (this.driver === "local") {
|
|||
|
common_vendor.Ws.chooseAndUploadFile = sheep_components_sUploader_chooseAndUploadFile.chooseAndUploadFile;
|
|||
|
}
|
|||
|
this.form = this.getForm("uniForms");
|
|||
|
this.formItem = this.getForm("uniFormsItem");
|
|||
|
if (this.form && this.formItem) {
|
|||
|
if (this.formItem.name) {
|
|||
|
this.rename = this.formItem.name;
|
|||
|
this.form.inputChildrens.push(this);
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
methods: {
|
|||
|
/**
|
|||
|
* 公开用户使用,清空文件
|
|||
|
* @param {Object} index
|
|||
|
*/
|
|||
|
clearFiles(index) {
|
|||
|
if (index !== 0 && !index) {
|
|||
|
this.files = [];
|
|||
|
this.$nextTick(() => {
|
|||
|
this.setEmit();
|
|||
|
});
|
|||
|
} else {
|
|||
|
this.files.splice(index, 1);
|
|||
|
}
|
|||
|
this.$nextTick(() => {
|
|||
|
this.setEmit();
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 公开用户使用,继续上传
|
|||
|
*/
|
|||
|
upload() {
|
|||
|
let files = [];
|
|||
|
this.files.forEach((v, index) => {
|
|||
|
if (v.status === "ready" || v.status === "error") {
|
|||
|
files.push(Object.assign({}, v));
|
|||
|
}
|
|||
|
});
|
|||
|
return this.uploadFiles(files);
|
|||
|
},
|
|||
|
setValue(newVal, oldVal) {
|
|||
|
return __async(this, null, function* () {
|
|||
|
const newData = (v) => __async(this, null, function* () {
|
|||
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/;
|
|||
|
let url = "";
|
|||
|
if (v.fileID) {
|
|||
|
url = v.fileID;
|
|||
|
} else {
|
|||
|
url = v.url;
|
|||
|
}
|
|||
|
if (reg.test(url)) {
|
|||
|
v.fileID = url;
|
|||
|
v.url = yield this.getTempFileURL(url);
|
|||
|
}
|
|||
|
if (v.url)
|
|||
|
v.path = v.url;
|
|||
|
return v;
|
|||
|
});
|
|||
|
if (this.returnType === "object") {
|
|||
|
if (newVal) {
|
|||
|
yield newData(newVal);
|
|||
|
} else {
|
|||
|
newVal = {};
|
|||
|
}
|
|||
|
} else {
|
|||
|
if (!newVal)
|
|||
|
newVal = [];
|
|||
|
for (let i = 0; i < newVal.length; i++) {
|
|||
|
let v = newVal[i];
|
|||
|
yield newData(v);
|
|||
|
}
|
|||
|
}
|
|||
|
this.localValue = newVal;
|
|||
|
if (this.form && this.formItem && !this.is_reset) {
|
|||
|
this.is_reset = false;
|
|||
|
this.formItem.setValue(this.localValue);
|
|||
|
}
|
|||
|
let filesData = Object.keys(newVal).length > 0 ? newVal : [];
|
|||
|
this.files = [].concat(filesData);
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 选择文件
|
|||
|
*/
|
|||
|
choose() {
|
|||
|
if (this.disabled)
|
|||
|
return;
|
|||
|
if (this.files.length >= Number(this.limitLength) && this.showType !== "grid" && this.returnType === "array") {
|
|||
|
common_vendor.index.showToast({
|
|||
|
title: `您最多选择 ${this.limitLength} 个文件`,
|
|||
|
icon: "none"
|
|||
|
});
|
|||
|
return;
|
|||
|
}
|
|||
|
this.chooseFiles();
|
|||
|
},
|
|||
|
/**
|
|||
|
* 选择文件并上传
|
|||
|
*/
|
|||
|
chooseFiles() {
|
|||
|
const _extname = sheep_components_sUploader_utils.get_extname(this.fileExtname);
|
|||
|
common_vendor.Ws.chooseAndUploadFile({
|
|||
|
type: this.fileMediatype,
|
|||
|
compressed: false,
|
|||
|
sizeType: this.sizeType,
|
|||
|
// TODO 如果为空,video 有问题
|
|||
|
extension: _extname.length > 0 ? _extname : void 0,
|
|||
|
count: this.limitLength - this.files.length,
|
|||
|
//默认9
|
|||
|
onChooseFile: this.chooseFileCallback,
|
|||
|
onUploadProgress: (progressEvent) => {
|
|||
|
this.setProgress(progressEvent, progressEvent.index);
|
|||
|
}
|
|||
|
}).then((result) => {
|
|||
|
this.setSuccessAndError(result.tempFiles);
|
|||
|
}).catch((err) => {
|
|||
|
console.log("选择失败", err);
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 选择文件回调
|
|||
|
* @param {Object} res
|
|||
|
*/
|
|||
|
chooseFileCallback(res) {
|
|||
|
return __async(this, null, function* () {
|
|||
|
const _extname = sheep_components_sUploader_utils.get_extname(this.fileExtname);
|
|||
|
const is_one = Number(this.limitLength) === 1 && this.disablePreview && !this.disabled || this.returnType === "object";
|
|||
|
if (is_one) {
|
|||
|
this.files = [];
|
|||
|
}
|
|||
|
let { filePaths, files } = sheep_components_sUploader_utils.get_files_and_is_max(res, _extname);
|
|||
|
if (!(_extname && _extname.length > 0)) {
|
|||
|
filePaths = res.tempFilePaths;
|
|||
|
files = res.tempFiles;
|
|||
|
}
|
|||
|
let currentData = [];
|
|||
|
for (let i = 0; i < files.length; i++) {
|
|||
|
if (this.limitLength - this.files.length <= 0)
|
|||
|
break;
|
|||
|
files[i].uuid = Date.now();
|
|||
|
let filedata = yield sheep_components_sUploader_utils.get_file_data(files[i], this.fileMediatype);
|
|||
|
filedata.progress = 0;
|
|||
|
filedata.status = "ready";
|
|||
|
this.files.push(filedata);
|
|||
|
currentData.push(__spreadProps(__spreadValues({}, filedata), {
|
|||
|
file: files[i]
|
|||
|
}));
|
|||
|
}
|
|||
|
this.$emit("select", {
|
|||
|
tempFiles: currentData,
|
|||
|
tempFilePaths: filePaths
|
|||
|
});
|
|||
|
res.tempFiles = files;
|
|||
|
if (!this.autoUpload) {
|
|||
|
res.tempFiles = [];
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 批传
|
|||
|
* @param {Object} e
|
|||
|
*/
|
|||
|
uploadFiles(files) {
|
|||
|
files = [].concat(files);
|
|||
|
return sheep_components_sUploader_chooseAndUploadFile.uploadCloudFiles.call(this, files, 5, (res) => {
|
|||
|
this.setProgress(res, res.index, true);
|
|||
|
}).then((result) => {
|
|||
|
this.setSuccessAndError(result);
|
|||
|
return result;
|
|||
|
}).catch((err) => {
|
|||
|
console.log(err);
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 成功或失败
|
|||
|
*/
|
|||
|
setSuccessAndError(res, fn) {
|
|||
|
return __async(this, null, function* () {
|
|||
|
let successData = [];
|
|||
|
let errorData = [];
|
|||
|
let tempFilePath = [];
|
|||
|
let errorTempFilePath = [];
|
|||
|
for (let i = 0; i < res.length; i++) {
|
|||
|
const item = res[i];
|
|||
|
const index = item.uuid ? this.files.findIndex((p) => p.uuid === item.uuid) : item.index;
|
|||
|
if (index === -1 || !this.files)
|
|||
|
break;
|
|||
|
if (item.errMsg === "request:fail") {
|
|||
|
this.files[index].url = item.path;
|
|||
|
this.files[index].status = "error";
|
|||
|
this.files[index].errMsg = item.errMsg;
|
|||
|
errorData.push(this.files[index]);
|
|||
|
errorTempFilePath.push(this.files[index].url);
|
|||
|
} else {
|
|||
|
this.files[index].errMsg = "";
|
|||
|
this.files[index].fileID = item.url;
|
|||
|
const reg = /cloud:\/\/([\w.]+\/?)\S*/;
|
|||
|
if (reg.test(item.url)) {
|
|||
|
this.files[index].url = yield this.getTempFileURL(item.url);
|
|||
|
} else {
|
|||
|
this.files[index].url = item.url;
|
|||
|
}
|
|||
|
this.files[index].status = "success";
|
|||
|
this.files[index].progress += 1;
|
|||
|
successData.push(this.files[index]);
|
|||
|
tempFilePath.push(this.files[index].fileID);
|
|||
|
}
|
|||
|
}
|
|||
|
if (successData.length > 0) {
|
|||
|
this.setEmit();
|
|||
|
this.$emit("success", {
|
|||
|
tempFiles: this.backObject(successData),
|
|||
|
tempFilePaths: tempFilePath
|
|||
|
});
|
|||
|
}
|
|||
|
if (errorData.length > 0) {
|
|||
|
this.$emit("fail", {
|
|||
|
tempFiles: this.backObject(errorData),
|
|||
|
tempFilePaths: errorTempFilePath
|
|||
|
});
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 获取进度
|
|||
|
* @param {Object} progressEvent
|
|||
|
* @param {Object} index
|
|||
|
* @param {Object} type
|
|||
|
*/
|
|||
|
setProgress(progressEvent, index, type) {
|
|||
|
this.files.length;
|
|||
|
const percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
|
|||
|
let idx = index;
|
|||
|
if (!type) {
|
|||
|
idx = this.files.findIndex((p) => p.uuid === progressEvent.tempFile.uuid);
|
|||
|
}
|
|||
|
if (idx === -1 || !this.files[idx])
|
|||
|
return;
|
|||
|
this.files[idx].progress = percentCompleted - 1;
|
|||
|
this.$emit("progress", {
|
|||
|
index: idx,
|
|||
|
progress: parseInt(percentCompleted),
|
|||
|
tempFile: this.files[idx]
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 删除文件
|
|||
|
* @param {Object} index
|
|||
|
*/
|
|||
|
delFile(index) {
|
|||
|
this.$emit("delete", {
|
|||
|
tempFile: this.files[index],
|
|||
|
tempFilePath: this.files[index].url
|
|||
|
});
|
|||
|
this.files.splice(index, 1);
|
|||
|
this.$nextTick(() => {
|
|||
|
this.setEmit();
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 获取文件名和后缀
|
|||
|
* @param {Object} name
|
|||
|
*/
|
|||
|
getFileExt(name) {
|
|||
|
const last_len = name.lastIndexOf(".");
|
|||
|
const len = name.length;
|
|||
|
return {
|
|||
|
name: name.substring(0, last_len),
|
|||
|
ext: name.substring(last_len + 1, len)
|
|||
|
};
|
|||
|
},
|
|||
|
/**
|
|||
|
* 处理返回事件
|
|||
|
*/
|
|||
|
setEmit() {
|
|||
|
let data = [];
|
|||
|
let updateUrl = [];
|
|||
|
if (this.returnType === "object") {
|
|||
|
data = this.backObject(this.files)[0];
|
|||
|
this.localValue = data ? data : null;
|
|||
|
updateUrl = data ? data.url : "";
|
|||
|
} else {
|
|||
|
data = this.backObject(this.files);
|
|||
|
if (!this.localValue) {
|
|||
|
this.localValue = [];
|
|||
|
}
|
|||
|
this.localValue = [...data];
|
|||
|
if (this.localValue.length > 0) {
|
|||
|
this.localValue.forEach((item) => {
|
|||
|
updateUrl.push(item.url);
|
|||
|
});
|
|||
|
}
|
|||
|
}
|
|||
|
this.$emit("update:modelValue", this.localValue);
|
|||
|
this.$emit("update:url", updateUrl);
|
|||
|
},
|
|||
|
/**
|
|||
|
* 处理返回参数
|
|||
|
* @param {Object} files
|
|||
|
*/
|
|||
|
backObject(files) {
|
|||
|
let newFilesData = [];
|
|||
|
files.forEach((v) => {
|
|||
|
newFilesData.push({
|
|||
|
extname: v.extname,
|
|||
|
fileType: v.fileType,
|
|||
|
image: v.image,
|
|||
|
name: v.name,
|
|||
|
path: v.path,
|
|||
|
size: v.size,
|
|||
|
fileID: v.fileID,
|
|||
|
url: v.url
|
|||
|
});
|
|||
|
});
|
|||
|
return newFilesData;
|
|||
|
},
|
|||
|
getTempFileURL(fileList) {
|
|||
|
return __async(this, null, function* () {
|
|||
|
fileList = {
|
|||
|
fileList: [].concat(fileList)
|
|||
|
};
|
|||
|
const urls = yield common_vendor.Ws.getTempFileURL(fileList);
|
|||
|
return urls.fileList[0].tempFileURL || "";
|
|||
|
});
|
|||
|
},
|
|||
|
/**
|
|||
|
* 获取父元素实例
|
|||
|
*/
|
|||
|
getForm(name = "uniForms") {
|
|||
|
let parent = this.$parent;
|
|||
|
let parentName = parent.$options.name;
|
|||
|
while (parentName !== name) {
|
|||
|
parent = parent.$parent;
|
|||
|
if (!parent)
|
|||
|
return false;
|
|||
|
parentName = parent.$options.name;
|
|||
|
}
|
|||
|
return parent;
|
|||
|
}
|
|||
|
}
|
|||
|
};
|
|||
|
if (!Array) {
|
|||
|
const _component_upload_image = common_vendor.resolveComponent("upload-image");
|
|||
|
const _component_upload_file = common_vendor.resolveComponent("upload-file");
|
|||
|
(_component_upload_image + _component_upload_file)();
|
|||
|
}
|
|||
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
|
return common_vendor.e({
|
|||
|
a: $props.title
|
|||
|
}, $props.title ? {
|
|||
|
b: common_vendor.t($props.title),
|
|||
|
c: common_vendor.t($options.filesList.length),
|
|||
|
d: common_vendor.t($options.limitLength)
|
|||
|
} : {}, {
|
|||
|
e: $props.subtitle
|
|||
|
}, $props.subtitle ? {
|
|||
|
f: common_vendor.t($props.subtitle)
|
|||
|
} : {}, {
|
|||
|
g: $props.fileMediatype === "image" && $options.showType === "grid"
|
|||
|
}, $props.fileMediatype === "image" && $options.showType === "grid" ? {
|
|||
|
h: $data.imgsrc,
|
|||
|
i: common_vendor.o($options.uploadFiles),
|
|||
|
j: common_vendor.o($options.choose),
|
|||
|
k: common_vendor.o($options.delFile),
|
|||
|
l: common_vendor.p({
|
|||
|
readonly: $props.readonly,
|
|||
|
["image-styles"]: $props.imageStyles,
|
|||
|
["files-list"]: $props.url,
|
|||
|
limit: $options.limitLength,
|
|||
|
disablePreview: $props.disablePreview,
|
|||
|
delIcon: $props.delIcon
|
|||
|
})
|
|||
|
} : {}, {
|
|||
|
m: $props.fileMediatype !== "image" || $options.showType !== "grid"
|
|||
|
}, $props.fileMediatype !== "image" || $options.showType !== "grid" ? {
|
|||
|
n: common_vendor.o($options.uploadFiles),
|
|||
|
o: common_vendor.o($options.choose),
|
|||
|
p: common_vendor.o($options.delFile),
|
|||
|
q: common_vendor.p({
|
|||
|
readonly: $props.readonly,
|
|||
|
["list-styles"]: $props.listStyles,
|
|||
|
["files-list"]: $options.filesList,
|
|||
|
showType: $options.showType,
|
|||
|
delIcon: $props.delIcon
|
|||
|
})
|
|||
|
} : {});
|
|||
|
}
|
|||
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c7e140c0"]]);
|
|||
|
wx.createComponent(Component);
|
|||
|
//# sourceMappingURL=s-uploader.js.map
|