|- components |- ImageUpload |- ImageUpload.vue |- index.js

$ npm i image-compressor.js -S$ npm i vue-upload-component -S

// index.jsimport ImageUpload from './ImageUpload'export default ImageUpload

// ImageUpload.vue <template> <div class="m-image-upload"> <!--  這里分為兩段遍歷，理由是：在編輯情況下要默認為組件添加默認數據，雖然說組件提供了 `add` 方法，  但在編輯狀態下，需要把 url 形式的圖片轉換成 File 之后才可以添加進去，略微麻煩。  所以分兩次遍歷，一次遍歷表單對象里的圖片（直接用img標簽展示，新上傳的圖片可以通過 blob 來賦值 src），第二次遍歷組件里的 files --> <div  class="file-item"  v-for="(file, index) in value">  <img  :src="file.thumb || file.url"  @click="preview(index)"  />  <van-icon  name="clear"  class="close"  @click="remove(index, true)"/> <!-- 把圖片從數組中刪除 --> </div> <div  :class="{'file-item': true, 'active': file.active, 'error': !!file.error}"  v-for="(file, index) in files"> <!-- 加幾個樣式來控制 `上傳中` 和 `上傳失敗` 的樣式-->  <img  v-if="file.blob"  :src="file.blob"  />  <div class="uploading-shade">  <p>{{ file.progress }} %</p>  <p>正在上傳</p>  </div>  <div class="error-shade">  <p>上傳失??！</p>  </div>  <van-icon  name="clear"  class="close"  @click="remove(index)"  /> </div> <file-upload  ref="uploader"  v-model="files"  multiple  :thread="10"  extensions="jpg,gif,png,webp"  post-action="http://localhost:3000/file/upload"  @input-file="inputFile"  @input-filter="inputFilter" >  <van-icon name="photo"/> </file-upload> </div></template><script> /** * 圖片上傳控件 * 使用方法：  import ImageUpload from '@/components/ImageUpload'  ...  components: {  ImageUpload  },  ...  <image-upload :value.sync="pics"/> */ import uploader from 'vue-upload-component' import ImageCompressor from 'image-compressor.js'; import { ImagePreview } from 'vant'; export default { name: 'ImageUpload', props: {  value: Array // 通過`.sync`來添加更新值的語法題，通過 this.$emit('update:value', this.value) 來更新 }, data() {  return {  files: [] // 存放在組件的file對象  } }, components: {  'file-upload': uploader }, methods: {  // 當 add, update, remove File 這些事件的時候會觸發  inputFile(newFile, oldFile) {  // 上傳完成  if (newFile && oldFile && !newFile.active && oldFile.active) {   // 獲得相應數據   if (newFile.xhr && newFile.xhr.status === 200) {   newFile.response.data.thumb = newFile.thumb // 把縮略圖轉移   this.value.push(newFile.response.data) // 把 uploader 里的文件賦值給 value   this.$refs.uploader.remove(newFile) // 刪除當前文件對象   this.$emit('update:value', this.value) // 更新值   }  }  // 自動上傳  if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {   if (!this.$refs.uploader.active) {   this.$refs.uploader.active = true   }  }  },  // 文件過濾，可以通過 prevent 來阻止上傳  inputFilter(newFile, oldFile, prevent) {  if (newFile && (!oldFile || newFile.file !== oldFile.file)) {   // 自動壓縮   if (newFile.file && newFile.type.substr(0, 6) === 'image/') { // && this.autoCompress > 0 && this.autoCompress < newFile.size（小于一定尺寸就不壓縮）   newFile.error = 'compressing'   // 壓縮圖片   const imageCompressor = new ImageCompressor(null, {    quality: .5,    convertSize: Infinity,    maxWidth: 1000,   })   imageCompressor.compress(newFile.file).then((file) => {    // 創建 blob 字段 用于圖片預覽    newFile.blob = ''    let URL = window.URL || window.webkitURL    if (URL && URL.createObjectURL) {    newFile.blob = URL.createObjectURL(file)    }    // 縮略圖    newFile.thumb = ''    if (newFile.blob && newFile.type.substr(0, 6) === 'image/') {    newFile.thumb = newFile.blob    }    // 更新 file    this.$refs.uploader.update(newFile, {error: '', file, size: file.size, type: file.type})   }).catch((err) => {    this.$refs.uploader.update(newFile, {error: err.message || 'compress'})   })   }  }  },  remove(index, isValue) {  if (isValue) {   this.value.splice(index, 1)   this.$emit('update:value', this.value)  } else {   this.$refs.uploader.remove(this.files[index])  }  },  preview(index) {  ImagePreview({   images: this.value.map(item => (item.thumb || item.url)),   startPosition: index  });  } } }</script>

compress(imgFile) { let _this = this return new Promise((resolve, reject) => { let reader = new FileReader() reader.onload = e => {  let img = new Image()  img.src = e.target.result  img.onload = () => {  let canvas = document.createElement('canvas')  let ctx = canvas.getContext('2d')  canvas.width = img.width  canvas.height = img.height  // 鋪底色  ctx.fillStyle = '#fff'  ctx.fillRect(0, 0, canvas.width, canvas.height)  ctx.drawImage(img, 0, 0, img.width, img.height)  // 進行壓縮  let ndata = canvas.toDataURL('image/jpeg', 0.3)  resolve(_this.dataURLtoFile(ndata, imgFile.name))  } } reader.onerror = e => reject(e) reader.readAsDataURL(imgFile) })}// base64 轉 BlobdataURLtoBlob(dataurl) { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], {type: mime})},// base64 轉 FiledataURLtoFile(dataurl, filename) { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, {type: mime})}