preface

Recently, I used an upload function in the project, and I kept quoting 400 in the joint investigation of the front and back ends. After consulting the documents and referring to the high-quality articles of various bloggers, the problem was finally solved, and I wrote this article for record, so that I could use it next time. If necessary, you can modify the interface and HTTP-request method according to the project requirements.

Code direct transport can see the effect

template
<template>
  <div>
    <el-upload
      class="upload-excel"
      ref="upload"
      action="string"
      accept=".xlsx,.xls"
      :limit="1"
      :http-request="httpRequest"
      :file-list="fileList"
      :auto-upload="false"
      :before-upload="beforeExcelUpload"
    >
      <el-button slot="trigger" size="small" type="primary">Select the file</el-button>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="submitUpload"
      >Click on the upload</el-button>
      <div slot="tip" class="el-upload__tip">Only XLSX/XLS files can be uploaded, and the maximum size is 1MB</div>
    </el-upload>
  </div>
</template>
Copy the code

Here’s an overview of what the parameters do

  • Action Specifies the address to upload to. If we use http-Request, we can pass in a string for the action
  • Accept Accepts the file type to be uploaded
  • Limit Maximum number of uploads allowed
  • File-list Specifies the list of uploaded files. The fileList bound to the file must be declared in data
  • Http-request overrides the default upload behavior and allows you to customize the upload implementation
  • Before-upload Hook before uploading a file. The parameter is the uploaded file. If false is returned, the upload will stop. This is where we can set limits on file upload formats and sizes
script
<script>
import { uploadExcel } from '@/api/test';

export default {
  name: 'testMenu11'.data() {
    return {
      fileList: []}; },methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    // Before uploading the file, determine the size and type of the file before uploading
    beforeExcelUpload(file) {
      // Print file to help us understand the parameters we need
      console.log(file);
      const isExcel =
        file.name.split('. ') [1= = ='xlsx' || file.name.split('. ') [1= = ='xls';
      const isSize = file.size / 1024 / 1024 < 1;
      if(! isExcel) {this.$message({
          message: 'Only XLS or XLSX files can be uploaded! '.type: 'error'
        });
      }
      if(! isSize) {this.$message({
          message: 'Upload file size cannot exceed 1MB! '.type: 'error'
        });
      }
      return isExcel && isSize;
    },
    // Override the default upload behavior
    httpRequest(params) {
      let fd = new FormData();
      fd.append('file', params.file);
      fd.append('fileName'.'Sunflower Book');
      fd.append('userId'.'001');
      // Query is the parameter received in params, fd is the parameter received in body
      uploadExcel({ query: 'query' }, fd)
        .then((res) = > {
          if (res.meta.code == 1) {
            this.$message({
              message: 'Upload successful'.type: 'success'
            });
          }
        })
        .catch((err) = > {
          this.$message({
            message: 'Upload failed, please re-upload'.type: 'error'}); }); }}}; </script>Copy the code
api
// src/api/test.js
import request from '@/utils/request.js';

// File upload
export function uploadExcel(query, data) {
  return request({
    url: '/mock/test/upload'.method: 'post'.headers: { 'Content-Type': 'multipart/form-data' },
    params: query,
    data
  });
}
Copy the code

reference

  • TODO

supplement

File upload code is actually very simple, but derived from a lot of knowledge, this to be added.

The last

  • The article is their own hand knock, is the summary of daily work, if there are mistakes, please correct
  • If you encounter any problems, please leave a message, you can help solve it together