原生实现图片上传删除

最新推荐文章于 2024-06-20 22:43:47 发布

前端小小小周

最新推荐文章于 2024-06-20 22:43:47 发布

阅读量401

点赞数 13

文章标签： javascript 前端 css html vue.js css3

本文链接：https://blog.csdn.net/qq_52050536/article/details/136847637

版权

本文详细介绍了如何在前端使用React和NUI库实现图片上传、预览功能，并提供了删除功能的代码片段。开发者可以了解如何处理文件上传、使用FileReader进行图片预览以及调用接口进行拼接和显示图片。

摘要由CSDN通过智能技术生成

1.上传图片&预览

    <n-form ref="formRef" inline label-width="90px" label-placement="left" require-mark-placement="left" size="large"
      style="display: flex; justify-content: center">
      <n-form-item label="图片" path="" style="display: flex; justify-content: center">
        <n-upload @change="handleUploadChange" :default-upload="false" type="file" accept="image/jpeg" :max="1">
          <n-button class="w-400px h-40px">
            <template #icon>
              <n-icon>
                <svg-icon name="icon_upload_outline" />
              </n-icon> </template>点击上传</n-button>
        </n-upload>
      </n-form-item>
    </n-form>
    <!-- 单个图片预览 -->
    <n-scrollbar style="max-height: 640px;">
      <div v-if="imgsback.length > 0  class="w-960px flex items-center flex-wrap mt-10px">
        <div v-for="(item, i) in imgsback" :key='i'>
          <div class="flex items-center w-300px h-250px">
            <div class="px-10px h-300px">
              <img class="img" :src="item" alt="" style="width:100%;vertical-align: bottom;">
            </div>
            <n-button @click="delimgback(i)" style="float: right;" class="mt-10px" strong secondary round
              type="error">删除</n-button>
          </div>
        </div>
      </div>
    </n-scrollbar>

2.图片上传以及预览、删除的js代码

/**
 * 图片预览地址
 */
const imgsback = ref([])
/**
 * 图片原文件，上传到后台
 */
const imgfilesback = ref([])
/**
 * 限制上传数量
 */
const sizeback = ref(15)
/**
 * 预览拼接好的文件
 */
const imgSrc = ref("")
/**
 * 实现上传并且预览图片
 * @param event
 */
const fileChangeback = (event) => {
  let file = event.target.files
  let leng = file.length;
  for (let i = 0; i < leng; i++) {
    let reader = new FileReader();    // 使用 FileReader 来获取图片路径及预览效果
    imgfilesback.value.push(file[i])
    reader.readAsDataURL(file[i]);
    reader.onload = function (e) {
      imgsback.value.push(e.target.result);   // base 64 图片地址形成预览
    };
  }
}
/**
 * 删除
 * @param i
 */
const delimgback = (i) => {
  imgfilesback.value.splice(i, 1)
  imgsback.value.splice(i, 1)
}
const fileList = reactive({
  signAttId: [],
});
const handleUploadChange = (datas: { fileList: any[] }) => {
  fileList.signAttId = datas.fileList.map((item) => {
    return item.file;
  });
};

3.调用接口预览拼接图片

    <!-- 预览拼接好的图片 -->
    <n-modal :mask-closable="false" :show="showModalImg" preset="card" :segmented="segmented" class="w-full h-full"
      :bordered="false" @update:show="showModalImg = false">
      <template #header>
        <div class="font-400" style="text-align: center; width: auto">
          预览拼接好的图片
        </div>
      </template>
      <n-scrollbar style="max-height: 800px;">
        <img v-if="imgSrc" class="img" :src="imgSrc" alt="" style="width:100%;height:100%">
      </n-scrollbar>
      <template #footer>
        <n-space style="display: flex; justify-content: flex-end">
          <n-button @click="showModalImg = false" class="mr-15px">{{
            $t("hr.cancel")
          }}</n-button>
          <n-button type="info" @click="submit">确认上传</n-button>
        </n-space>
      </template>
    </n-modal>

/**
 * blob文件转file
 * @param blob
 */
function blobToFile(blob) {
  return new File([blob], 'screenshot.jpeg', { type: 'image/jpeg' })
}
// 上传拼接图片并预览图片
const reviewMergePic = () => {
  const formData = new FormData();
  imgfilesback.value.forEach((item) => {
    formData.append("files", item);
  })
//TODO接口
 xxx(formData)
    .then((res) => {
      const blob = new Blob([res.data.value]);
      imgSrc.value = URL.createObjectURL(blob)
      showModalImg.value = true
      fileList.signAttId = [blobToFile(res.data.value)]
    })
    .catch((err) => {
      console.log(err);
    });
}