1创建上传图片

   <el-form-item label="图片" :label-width="formLabelWidth" prop="img">
            <el-upload v-model="form.img" :file-list="fileList" action="放人接口" list-type="picture-card"
              :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess"
              :on-change="handleChange" name="img" :limit="5">
              <el-dialog>
                <img w-full :src="dialogImageUrl" alt="" />
              </el-dialog>
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>

2.获取图片路径

const fileList = ref([]);

const dialogImageUrl = ref([]);
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  console.log(fileList, 'file');
};
const handlePictureCardPreview = (uploadFile) => {
  console.log(uploadFile);
  console.log(fileList, 'file');
  dialogImageUrl.value = uploadFile.url;
};
const handleChange = (e) => {
  console.log(e);
};

3上传成功后路径在成功事件里返回

const handleSuccess = (img) => {
  console.log(img);
  console.log(fileList, 'file');

  if (img.status == 1) {
    handleSuccess.img = img.front_file;
    console.log(img.front_file);
  }
};