短视频软件开发vant上传图片并压缩最新

form表单上传图片

	<van-form @submit="onSubmit">
      <van-field name="uploader" label="文件上传">
        <template #input>   //field插槽
          <van-uploader
            v-model="uploader"
            :after-read="afterRead"
            :max-count="3"         
            preview-size="2rem"   //预览图尺寸，rem单位可适配
          />
        </template>
      </van-field>

      <van-button round block type="info" native-type="submit">
        提交
      </van-button>
    </van-form>

	data() {
	    return {
	      uploader: []
	    };
	  },

   methods: {
    afterRead(file) {
      file.status = "uploading";  //上传状态
      file.message = "上传中...";  //显示字样
      //上传接口  import { upImage } from '@/api';
	  try {
        const { data } = await upImage(file.file);  //封装的接口
        file.status = 'done';  //改变状态
        file.url = data.url;   //接口返回的图片地址存在数组中的每一项url中，在提交的时候循环uploader可以获取到
      } catch (error) {
        file.status = 'failed';
      }
   	
    onSubmit(values) {
      console.log("submit", values);
    }
  }

//comon.js中封装公共接口
npm i lrz --save
import lrz from "lrz";
export const upImage = async file => {
  const { formData } = await lrz(file);  //压缩后直接使用formdata
  return http.post('/common/uploadali', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
};