Vue.js 中的文件上传与接口规范详解-CSDN博客

URL.createObjectURL(文件信息)：会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。

css加权重筛选/deep/、::v-deep：

<style lang="scss" scoped>
//less  /deep/
//scss  ::v-deep
.hidden {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>

ResetFul接口规范：

例：用户功能地址是：/admin/user
读取用户列表：请求方式为：GET 地址为 /admin/user
读取单个用户：请求方式为：GET 地址为 /admin/user/:id
新增单个用户：请求方式为：POST 地址为 /admin/user/ data为提交的数据（user,pwd）
修改单个用户：请求方式为：PUT 地址为 /admin/user/:id data为提交的数据（提交完整的字段数据）
修改单个用户：请求方式为：PATCH 地址为 /admin/user/:id data为提交的数据（提交要修改部分字段数据）
删除单个用户：请求方式为：DELETE 地址为 /admin/user/:id

el-upload组件：该组件内部会自己使用原生的xhr进行请求的发送

list-type：文件列表的类型可选值（text/picture/picture-card）
action：必选参数，上传的地址
name：上传的文件字段名
headers：上传的请求头部
on-success：文件上传成功时的钩子函数，这里可以获取到服务器返回的数据function(response, file, fileList)
auto-upload：自动上传功能，默认为true
http-request:覆盖默认的上传行为，可以自定义上传的实现
file-list:上传的文件列表, 一般用于做回显功能，file-list的数据不是双向绑定的

   <el-upload
      action=url
      list-type="picture-card"
      name="file"
      :headers="{ 'x-token': token }"
      :on-success="onSuccess"
    >
   </el-upload>
---------------------------------------------
   <el-upload
      action="#"
      list-type="picture-card"
      :http-request="httpRequest"
      :file-list="fileList"
      :on-remove="onRemove"
    >
    <i class="el-icon-plus"></i>
    </el-upload>

httpRequest(file) {
      let fd = new FormData();
      fd.append("file", file);
      axios
        .post(
          url,
          fd,
          {
            headers: {
              "x-token": this.token,
            },
          }
        )
        .then((res) => {
          console.log(res.data);
        });
    },
----------------------------------------------
 <el-upload
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
      action="#"
      :class="{ hidden: fileComputed }"
    >
      <i class="el-icon-plus" />
  </el-upload>