background

Vue2. X project, vantUI framework, to achieve the upload of images and videos to the back-end server.

implementation

  • Mobile terminal can adjust the camera of the mobile phone to take photos and select the file upload in the system

    Van – uploader component API:

    Note: When capture is not set, the system default behavior is invoked to let you choose camera or file. When you set this property, there is no selection screen!! If you don’t like the built-in interface of the system, you can package a selection interface by yourself. However, I have tried and found that it is not easy. The main reason is that the callback function provided by Van-Uploader is not comprehensive enough, so you need to package it by yourself.

  • Convert Base64 to a binary file stream

    By default, van-Uploade returns base64 files, whether images or videos. The backend requires binaries, so you need to convert. Reference link: blog.csdn.net/weixin_4413…

    // bae64 to file object
    function dataURLtoFileFun (dataurl, filename) {
      // convert base64 to a file, dataurl to base64 as a string, filename to a filename (must have a suffix, such as.jpg,.png)
      const arr = dataurl.split(', ')
      const mime = arr[0].match(/ : (. *?) ; /) [1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    }

Copy the code

  • Upload server

    Upload using AXIos, but uploading files requires configuration as follows

    const token = getToken()
const instance = axios.create({
  baseURL: process.env.VUE_APP_URL,
  headers: {
    // Customize the token field
    Authorization: token,
    // Important fields are submitted using formData
    'Content-Type': 'multipart/form-data'
  },
  // The axios interceptor will convert the file to an object format, and the upload will fail.
  
  transformRequest: [
    function (data) {
      return data
    }
  ]
})
Copy the code

    TransformRequest reference links: www.cnblogs.com/czy960731/p…

    Note: Since the interface in my project passes through the Axios interceptor, which supposedly streams files into objects, I created a new copy of Axios.

    Call interface:

    // The parameter is a single file
function upLoaderImg (file, fileTimestamp) {
  // file indicates that you read the callback file successfully, and fileTimestamp is the time stamp (required by the backend).
  // new a FormData parameter
  const fromData = new FormData()
  fromData.append('file', dataURLtoFileFun(file.content, file.file.name))
  fromData.append('fileTimestamp', fileTimestamp)
  return new Promise((resolve, reject) = > {
    // Change uploadUrl to your own upload path
    instance
      .post('uploadUrl', fromData)
      .then(res= > {
        console.log('Let's see if I uploaded it.', res)
        if (res && res.data && res.data.status === 1) {
          // If true resolve out
          resolve(res.data)
        } else {
          // Otherwise Toast prompts
          Toast.fail(res.data && res.data.msg)
          reject(res.data)
        }
      })
      .catch(err= > {
        Toast.fail('System exception')
        reject(err)
      })
  })
}
Copy the code

  • Uploading multiple files

    The original idea is to upload multiple files as an array, and the single file is a file object element of the array, but it doesn’t work. I don’t know what the error is, but it probably doesn’t work with formData.

    Then I went to look at the file upload form wrapped by Element-UI, which supports multiple file uploads, but its form is to send one upload request per file, so I did that too hahahahahahaha