vue中上传图片基本操作

<el-upload></el-upload>组件，实现图片的上传

 <el-upload
            name="file"
            :multiple="false"
            :action="upload.actionUrl"
            :file-list="fileList"
            :on-success="handleUploadSuccess"
            :on-change="handleChange"
            :show-file-list="true"
            class="upload-file-uploader"
            ref="upload"
            :auto-upload="false"
          >
            <!-- 上传按钮 -->
            <el-button size="mini" type="primary">选取文件</el-button>
            <!-- 上传提示 -->
          </el-upload>
          <el-button @click="onSave">保存</el-button>

data数据：

upload: {
        // 你的后端上传文件接口
        actionUrl: "/fire-order/sys/oss/upload",
      },
      fileList: [],

methods方法：

 onSave() {
      this.$refs.upload.submit();
    },

 // 添加文件时触发 change 事件
    handleChange(file, fileList) {
      this.fileList = fileList; 
    },

    // 每个文件上传成功后都会调用一次该函数
    handleUploadSuccess(file, fileList) {
      this.tmForm.skuImg = file.url;
    },

以上就是上传图片的基本操作。