vue图片上传

原创

于 2020-04-02 17:49:42 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

本文将详细介绍如何在Vue.js应用程序中实现图片上传功能，包括使用File API、FormData和axios发送文件请求，以及如何处理响应和展示上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="uploadBlock">
    <template v-for="(item,index) in img" v-show="img.length>0">
      <div class="uploadImage">
        <img :src="item.img" alt="">
        <span class="uploadSuccess el-icon-success"></span>
        <div class="uploadImageCover" v-if="!disabled">
          <span class="uploadCoverIcon el-icon-zoom-in" @click="showImage(item)"></span>
          <span class="uploadCoverIcon el-icon-delete" @click="deleteImg(index)"></span>
        </div>
      </div>
    </template>

    <div class="uploadBtn" v-loading="loading" v-show="!hideAdd" v-if="!disabled">
      <input type="file" ref="upload">
    </div>

  </div>
</template>
<script>
  import AliUpload from '../plugin/AliUpload'//导入阿里云地址

  export default {
    props: {
      finish: Function,
      title: String,
      multi: {
        type: Boolean,
        defau