项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,656 @@
<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: 'uniFilePicker',
      components: {
         uploadImage,
         uploadFile
      },
      options: {
         virtualHost: true
      },
      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.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)
         },
         async setValue(newVal, oldVal) {
            const newData =  async (v) => {
               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 = await this.getTempFileURL(url)
               }
               if(v.url) v.path = v.url
               return v
            }
            if (this.returnType === 'object') {
               if (newVal) {
                  await newData(newVal)
               } else {
                  newVal = {}
               }
            } else {
               if (!newVal) newVal = []
               for(let i =0 ;i < newVal.length ;i++){
                  let v = newVal[i]
                  await 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') {
               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 = 0
               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)
            return uploadCloudFiles.call(this, files, 5, res => {
                  this.setProgress(res, res.index, true)
               })
               .then(result => {
                  this.setSuccessAndError(result)
                  return result;
               })
               .catch(err => {
                  console.log(err)
               })
         },

         /**
          * æˆåŠŸæˆ–失败
          */
         async setSuccessAndError(res, fn) {
            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
                  // this.files[index].progress = -1
                  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 = await 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) {
            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 = data?data:null
            } 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,
                  fileID:v.fileID,
                  url: v.url
               })
            })
            return newFilesData
         },
         async getTempFileURL(fileList) {
            fileList = {
               fileList: [].concat(fileList)
            }
            const urls = await uniCloud.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;
         }
      }
   }
</script>

<style>
   .uni-file-picker {
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      /* #endif */
      flex: 1;
   }

   .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>