@10yun/cv-mobile-ui 0.3.26 → 0.4.2

package/ui-cv/cv-file-picker/cv-file-picker.vue

@@ -0,0 +1,619 @@
+<template>
+  <view class="uni-file-picker">
+    <view v-if="title" class="uni-file-picker__header">
+      <text class="file-title">{{ title }}</text>
+      <text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
+    </view>
+    <upload-image
+      v-if="fileMediatype === 'image' && showType === 'grid'"
+      :readonly="readonly"
+      :image-styles="imageStyles"
+      :files-list="filesList"
+      :limit="limitLength"
+      :disablePreview="disablePreview"
+      :delIcon="delIcon"
+      @uploadFiles="uploadFiles"
+      @choose="choose"
+      @delFile="delFile"
+    >
+      <slot>
+        <view class="is-add">
+          <view class="icon-add"></view>
+          <view class="icon-add rotate"></view>
+        </view>
+      </slot>
+    </upload-image>
+    <upload-file
+      v-if="fileMediatype !== 'image' || showType !== 'grid'"
+      :readonly="readonly"
+      :list-styles="listStyles"
+      :files-list="filesList"
+      :showType="showType"
+      :delIcon="delIcon"
+      @uploadFiles="uploadFiles"
+      @choose="choose"
+      @delFile="delFile"
+    >
+      <slot><button type="primary" size="mini">选择文件</button></slot>
+    </upload-file>
+  </view>
+</template>
+
+<script>
+import { chooseAndUploadFile, uploadCloudFiles } from './choose-and-upload-file.js';
+import { get_file_ext, get_extname, get_files_and_is_max, get_file_info, get_file_data } from './utils.js';
+import uploadImage from './upload-image.vue';
+import uploadFile from './upload-file.vue';
+let fileInput = null;
+/**
+ * FilePicker 文件选择上传
+ * @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=4079
+ * @property {Object|Array}	value	组件数据，通常用来回显 ,类型由return-type属性决定
+ * @property {Boolean}	disabled = [true|false]	组件禁用
+ * 	@value true 	禁用
+ * 	@value false 	取消禁用
+ * @property {Boolean}	readonly = [true|false]	组件只读，不可选择，不显示进度，不显示删除按钮
+ * 	@value true 	只读
+ * 	@value false 	取消只读
+ * @property {String}	return-type = [array|object]	限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
+ * 	@value array	规定 value 属性的类型为数组
+ * 	@value object	规定 value 属性的类型为对象
+ * @property {Boolean}	disable-preview = [true|false]	禁用图片预览，仅 mode:grid 时生效
+ * 	@value true 	禁用图片预览
+ * 	@value false 	取消禁用图片预览
+ * @property {Boolean}	del-icon = [true|false]	是否显示删除按钮
+ * 	@value true 	显示删除按钮
+ * 	@value false 	不显示删除按钮
+ * @property {Boolean}	auto-upload = [true|false]	是否自动上传，值为true则只触发@select,可自行上传
+ * 	@value true 	自动上传
+ * 	@value false 	取消自动上传
+ * @property {Number|String}	limit	最大选择个数 ，h5 会自动忽略多选的部分
+ * @property {String}	title	组件标题，右侧显示上传计数
+ * @property {String}	mode = [list|grid]	选择文件后的文件列表样式
+ * 	@value list 	列表显示
+ * 	@value grid 	宫格显示
+ * @property {String}	file-mediatype = [image|video|all]	选择文件类型
+ * 	@value image	只选择图片
+ * 	@value video	只选择视频
+ * 	@value all		选择所有文件
+ * @property {Array}	file-extname	选择文件后缀，根据 file-mediatype 属性而不同
+ * @property {Object}	list-style	mode:list 时的样式
+ * @property {Object}	image-styles	选择文件后缀，根据 file-mediatype 属性而不同
+ * @event {Function} select 	选择文件后触发
+ * @event {Function} progress 文件上传时触发
+ * @event {Function} success 	上传成功触发
+ * @event {Function} fail 		上传失败触发
+ * @event {Function} delete 	文件从列表移除时触发
+ */
+export default {
+  name: 'cvFilePicker',
+  components: {
+    uploadImage,
+    uploadFile
+  },
+  emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
+  props: {
+    // #ifdef VUE3
+    modelValue: {
+      type: [Array, Object],
+      default() {
+        return [];
+      }
+    },
+    // #endif
+
+    // #ifndef VUE3
+    value: {
+      type: [Array, Object],
+      default() {
+        return [];
+      }
+    },
+    // #endif
+
+    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
+    },
+    returnType: {
+      type: String,
+      default: 'array'
+    },
+    sizeType: {
+      type: Array,
+      default() {
+        return ['original', 'compressed'];
+      }
+    }
+  },
+  data() {
+    return {
+      files: [],
+      localValue: []
+    };
+  },
+  watch: {
+    // #ifndef VUE3
+    value: {
+      handler(newVal, oldVal) {
+        this.setValue(newVal, oldVal);
+      },
+      immediate: true
+    },
+    // #endif
+    // #ifdef VUE3
+    modelValue: {
+      handler(newVal, oldVal) {
+        this.setValue(newVal, oldVal);
+      },
+      immediate: true
+    }
+    // #endif
+  },
+  computed: {
+    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() {
+    // TODO 兼容不开通服务空间的情况
+    if (!(uniCloud.config && uniCloud.config.provider)) {
+      this.noSpace = true;
+      uniCloud.chooseAndUploadFile = chooseAndUploadFile;
+    }
+    this.tempData = {};
+    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: {
+    setValue(newVal, oldVal) {
+      const newData = (v) => {
+        const files = this.files.find((i) => i.url === v.url);
+        const reg = /cloud:\/\/([\w.]+\/?)\S*/;
+        v.path = v.url;
+        if (reg.test(v.url)) {
+          this.getTempFileURL(v, v.url);
+        }
+        return v;
+      };
+      // let data = null
+      if (this.returnType === 'object') {
+        newData(newData);
+      } else {
+        newVal.forEach((v) => {
+          newData(v);
+        });
+      }
+      this.localValue = newVal;
+      this.formItem && this.formItem.setValue(this.localValue);
+      this.files = [].concat(newVal || []);
+    },
+
+    /**
+     * 继续上传
+     */
+    upload() {
+      let files = [];
+      this.files.forEach((v, index) => {
+        if (v.status === 'ready' || v.status === 'error') {
+          files.push(Object.assign({}, v));
+        }
+      });
+
+      this.uploadFiles(files);
+    },
+    /**
+     * 选择文件
+     */
+    choose() {
+      if (this.disabled) return;
+      if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType === 'array') {
+        uni.showToast({
+          title: `您最多选择 ${this.limitLength} 个文件`,
+          icon: 'none'
+        });
+        return;
+      }
+      this.chooseFiles();
+    },
+
+    /**
+     * 选择文件并上传
+     */
+    chooseFiles() {
+      const _extname = get_extname(this.fileExtname);
+      // 获取后缀
+      uniCloud
+        .chooseAndUploadFile({
+          type: this.fileMediatype,
+          compressed: false,
+          sizeType: this.sizeType,
+          // TODO 如果为空，video 有问题
+          extension: _extname.length > 0 ? _extname : undefined,
+          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
+     */
+    async chooseFileCallback(res) {
+      const _extname = 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 } = 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 = await get_file_data(files[i], this.fileMediatype);
+        filedata.progress = 100;
+        filedata.status = 'ready';
+        this.files.push(filedata);
+        currentData.push({
+          ...filedata,
+          file: files[i]
+        });
+      }
+      this.$emit('select', {
+        tempFiles: currentData,
+        tempFilePaths: filePaths
+      });
+      res.tempFiles = files;
+      // 停止自动上传
+      if (!this.autoUpload || this.noSpace) {
+        res.tempFiles = [];
+      }
+    },
+
+    /**
+     * 批传
+     * @param {Object} e
+     */
+    uploadFiles(files) {
+      files = [].concat(files);
+      uploadCloudFiles
+        .call(this, files, 5, (res) => {
+          this.setProgress(res, res.index, true);
+        })
+        .then((result) => {
+          this.setSuccessAndError(result);
+        })
+        .catch((err) => {
+          console.log('err', err);
+        });
+    },
+
+    /**
+     * 成功或失败
+     */
+    async setSuccessAndError(res, fn) {
+      let successData = [];
+      let errorData = [];
+      let tempFilePath = [];
+      let errorTempFilePath = [];
+      for (let i = 0; i < res.length; i++) {
+        // const index  = item.index
+        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;
+          // this.files[index].progress = -1
+          errorData.push(this.files[index]);
+          errorTempFilePath.push(this.files[index].url);
+        } else {
+          this.files[index].errMsg = '';
+          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].url);
+        }
+      }
+
+      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) {
+      const fileLenth = this.files.length;
+      const percentNum = (index / fileLenth) * 100;
+      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;
+      // fix by mehaotian 100 就会消失，-1 是为了让进度条消失
+      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 = [];
+      if (this.returnType === 'object') {
+        data = this.backObject(this.files)[0];
+        this.localValue = {};
+        Object.assign(this.localValue, data);
+      } else {
+        data = this.backObject(this.files);
+        if (!this.localValue) {
+          this.localValue = [];
+        }
+        this.localValue = [...data];
+      }
+      // #ifdef VUE3
+      this.$emit('update:modelValue', this.localValue);
+      // #endif
+      // #ifndef VUE3
+      this.$emit('input', this.localValue);
+      // #endif
+    },
+
+    /**
+     * 处理返回参数
+     * @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,
+          url: v.url
+        });
+      });
+      return newFilesData;
+    },
+    async getTempFileURL(file, fileList) {
+      fileList = {
+        fileList: [].concat(fileList)
+      };
+      const urls = await uniCloud.getTempFileURL(fileList);
+      file.url = urls.fileList[0].tempFileURL || '';
+      file.path = file.url;
+      const index = this.files.findIndex((v) => v.path === file.path);
+      if (index !== -1) {
+        this.$set(this.files, index, file);
+      }
+    },
+    /**
+     * 获取父元素实例
+     */
+    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;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-file-picker {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  overflow: hidden;
+  /* #endif */
+}
+
+.uni-file-picker__header {
+  padding-top: 5px;
+  padding-bottom: 10px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: space-between;
+}
+
+.file-title {
+  font-size: 14px;
+  color: #333;
+}
+
+.file-count {
+  font-size: 14px;
+  color: #999;
+}
+
+.is-add {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-add {
+  width: 50px;
+  height: 5px;
+  background-color: #f1f1f1;
+  border-radius: 2px;
+}
+
+.rotate {
+  position: absolute;
+  transform: rotate(90deg);
+}
+</style>