前端vue 上传base64图片组件带获取展示 功能

npm找到的组件 带图片压缩 上传限制 数量限制等!!!
地址:https://www.npmjs.com/package/vue-upload-imgs

这个组件还有其他功能有需要的都可以自行研究.

实现思路是前端上传图片把图片前端处理转换成base64发送给后端,后端保存base64转换成图片保存到后端数据库,当需要展示或者修改时,把图片以base64传给前端,利用这个组件处理base64的性质,直接展示并增删图片.

图片修改部分!!!:我这边和后端商量的是前端先获取原始数据后端发现数据变化会先删之前的数据再把编辑后的所有数据进行保存,相当于每次图片的保存都是对后台图片的先删除再保存最新的数据,这样可能有些耗费性能,但是业务需求可能没那么处理大量图片所以采用了这个方法.

效果图:

关键节点展示:
新增的请求:

关键节点代码:

```javascript
<template>
  <Modal
    v-model="dataOutput.show2"
    class-name="vertical-center-modal"
    :visible.sync="modal1"
    title="档案-新增"
    width="720"
    ok-text="保存"
    :loading="loading"
    @on-ok="handleSubmit('formInline')"
  >
    <!-- <Form
      ref="formValidate"
      :model="formInline"
      :label-width="100"
      :rules="ruleInline"
    > -->
    <Form
      ref="formInline"
      :model="formInline"
      :rules="ruleInline"
      :label-width="100"
    >
      <FormItem label="档案类别：">
        <!-- <Input v-model="formValidate.name" placeholder="档案类别" /> -->
        <Cascader :data="casData" v-model="casValue"></Cascader>
      </FormItem>

      <FormItem label="签发时间：" style="margin-top: 30px" prop="create_time">
        <DatePicker
          type="date"
          placeholder="请选择"
          style="margin-top: 5px"
          format="yyyy-MM-dd"
          :value="formInline.create_time"
          @on-change="endDateTime"
        ></DatePicker>
      </FormItem>
    </Form>
    <!-- 图片上传  把后端要的base64传过去组件已写好    待处理-->
    <vue-upload-imgs
      multiple
      compress
      :before-read="beforeRead"
      :after-read="afterRead"
      :before-remove="beforeRemove"
      :limit="limit"
      :type="type"
      @preview="preview"
      @exceed="exceed"
      @oversize=