vue-upload上传图片详细使用（文档服务器）

前言

• 实际开发中我们的图片，文件，PDF我们都应该存在文档服务器当中。从而优化代码，减少代码文件大小。

• 我们可以让后端把文档服务器搭建好，写好相应的存储接口api，我们就可以使用Upload组件上传。

• 但是我们需要注意的是，在实际开发中。在请求拦截中设置的token，和userid（用户id）要重新设置一次。

• 因为我们是使用upload组件直接上传，并没有经过axios，拦截不到。要在headers（请求头中设置2个参数）

• 记得需要在Nginx中配置，可能会出现线上文档服务器post请求上传文件413（请求体过大-详细报错主页文章有）

代码实现

1.在添加表单中使用upload组件（饿了吗）

<el-form-item label="维保打印记录:" prop="fileList">
            <!-- <el-input v-model="form.mcRecord" style="width: 350px"></el-input> -->
            <!-- list-type="picture" 上传图片的样式 -->
            <el-upload
              class="upload-demo"
              :action="upload.url"
              :on-preview="handlePreview"
              :headers="upload.headers"
              :on-remove="handleRemove"
              :on-success="handleFileSuccess"
              :file-list="fileList"
              list-type="picture"
              :limit="10"
              :on-exceed="handleExceed"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件,且不超过500kb
              </div>
            </el-upload>
</el-form-item>

2.在data中设置参数

2.1fileList是上传成功图片存储地方，是一个数组对象，我是直接转换成数组字符串存在后端。

2.2url是当前连接的后端地址加上api地址

2.3headers是upload属性，添加api请求头中的token和tenant-id（用户id）来验证身份。

2.4getToken，getTenantId，是在utils中的方法，获取token和用户id的。

// 上传图片成功之后存储地方
      fileList: [],
      // 图片上传地址，和请求头数据
      upload: {
        // 设置上传的请求头部
        headers: { token: getToken(), "tenant-id": getTenantId() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/media/upload/coursefile",
      },

3.methods中的方法

为了方便查看，在点击已经上传成功文件时，会动态的使用js在document创建一个img来展示图片，方便查看。

// 文件上传成功钩子
    handleFileSuccess(response, file, fileList) {
      console.log("response", response);
      console.log("file", file);
      console.log("fileList", fileList);
      let x = {};
      x.name = response.filename;
      x.url = response.url;
      x.id = response.id;
      console.log("上传图片", x);
      this.fileList.push(x);
    },
    // 点击已上传文件右上角删除钩子
    handleRemove(file, fileList) {
      // console.log("id", file.id);
      console.log("删除之后", fileList);
      // const x = this.fileList.findIndex((v) => v.id == file.id);
      // console.log("删除下标", x);
      // this.fileList.splice(x, 1);
      this.fileList = fileList;
      console.log("处理过数据", this.fileList);
    },
    // 文件上传数量超过设置数量
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能选择10张图片${fileList.length} 个文件`);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
      const image = new Image();
      image.src = file.url;
      image.onload = () => {
        // 创建弹出层
        console.log("执行了");
        const previewContainer = document.createElement("div");
        previewContainer.style.position = "fixed";
        previewContainer.style.top = 0;
        previewContainer.style.bottom = 0;
        previewContainer.style.left = 0;
        previewContainer.style.right = 0;
        previewContainer.style.zIndex = 99999;
        previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
        previewContainer.style.display = "flex";
        previewContainer.style.justifyContent = "center";
        previewContainer.style.alignItems = "center";
        document.body.appendChild(previewContainer);
        // 在弹出层中添加图片
        const previewImage = document.createElement("img");
        previewImage.src = file.url;
        previewImage.style.maxWidth = "80%";
        previewImage.style.maxHeight = "80%";
        previewContainer.appendChild(previewImage);
        // 点击弹出层，关闭预览
        previewContainer.addEventListener("click", () => {
          document.body.removeChild(previewContainer);
        });
      };
    },

4.Nginx中配置-防止上传接口413报错（请求体过大）- 主页文章有

在nginx/conf/nginx文件中http下添加配置文件

worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    
    #解决请求体过大配置
    #允许客户端请求的最大单文件字节数
    client_max_body_size 15m; 
    #缓冲区代理缓冲用户端请求的最大字节数
    client_body_buffer_size 128k;

    server {
        listen       80;
        #定义服务器的默认网站根目录位置
        server_name  localhost;
        location / {
            root   html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; #解决页面刷新404问题
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

注意：

直接复制需要根据实际情况更改url（api接口路径），headers中请求头携带的参数（以request.js文件为准），Nginx中配置，不然会出现413请求体过大-主页文章有

---

总结：

经过这一趟流程下来相信你也对 vue-upload上传图片详细使用（文档服务器） 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕