移動端vue項目的圖片上傳插件

時間 2019-12-15

標籤移動 vue 項目圖片上傳插件欄目無線简体版

原文原文鏈接

有一移動端項目，使用的vant-ui。但是vant自帶的Uploader彷佛不支持一次選擇多張圖片上傳的功能。javascript

因而乎：在https://www.npmjs.com/查找發現找到 vue-upload-component 組件，功能基本都有，評價也不錯，目前有1500多個star。html

由於是國人開發的，全部比較完善的中文文檔。vue

完整的例子。java

使用：git

1.安裝：github




npm install vue-upload-component --save

2.在main.js中全局引入web

const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)

3.測試例子：test.vuenpm

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue-upload-component Test</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-upload-component"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
  </ul>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
  上傳文件
  </file-upload>
  <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">開始上傳</button>
  <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">中止上傳</button>
</div>
<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    /**
     * Has changed
     * @param  Object|undefined   newFile   只讀
     * @param  Object|undefined   oldFile   只讀
     * @return undefined
     */
    inputFile: function (newFile, oldFile) {
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // 得到相應數據
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  得到響應狀態碼
          console.log('status', newFile.xhr.status)
        }
      }
    },
    /**
     * Pretreatment
     * @param  Object|undefined   newFile   讀寫
     * @param  Object|undefined   oldFile   只讀
     * @param  Function           prevent   阻止回調
     * @return undefined
     */
    inputFilter: function (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // 過濾不是圖片後綴的文件
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
          return prevent()
        }
      }

      // 建立 blob 字段 用於圖片預覽
      newFile.blob = ''
      let URL = window.URL || window.webkitURL
      if (URL && URL.createObjectURL) {
        newFile.blob = URL.createObjectURL(newFile.file)
      }
    }
  }
});
</script>
</body>
</html>