Element-plus图片上传

Element-plus图片上传

封装的api

// 上传图片
export function uploadImage(params: any) {
  const fdata = new FormData();
  fdata.append("upfile", params.file);
  return service.request({
    method: 'POST',
    url: '/ueditor/******/uploadimage&encode=utf-8&type=1&nocompress=1',
    data: fdata,
    headers: {
      "Content-type": "multipart/form-data"
    },
  })
}

页面组件

 <el-form-item label="上传图片">
	<el-upload v-model:file-list="formData.fileList" class="upload-demo" :http-request="updateImg" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" list-type="picture" :limit="1">
		<el-button type="primary">点我上传</el-button>
            <template #tip>
                <div class="el-upload__tip">jpg/png 格式，且不高于 2MB</div>
            </template>
	</el-upload>
</el-form-item>

页面中调用接口

import { uploadImage } from "@/utils/api/service";

const updateImg = async (file) => {
  let result = await uploadImage(file);  //保存图片
}