vant上传图片--原生input上传-pdf- 视频 -文件

import axios from 'axios'
import { getToken } from '@/base/cookie'


  <van-field name="uploader" label="选择附件">
        <template #input>
          <van-uploader v-model="uploader" :after-read="afterRead" :max-count="1" accept="image/*"/>
        </template>
      </van-field>


    afterRead (files) { // 后台要的是file文件 与要用new FormData 赋值
      const dataone = new FormData()
      dataone.append('file', files.file) // 上传的是 File 对象
      // 设置请求头
      const config = {
        headers: {
          'X-Token': getToken()
        }
      }
      axios.post(`${process.env.VUE_APP_UPLOADER_API}` + '/file/upload', dataone, config).then(res => {
        if (res.data.code == 200) {
          setTimeout(() => { this.$toast.success('上传成功') }, 100)
        }
      }).catch(e => { })
    },

原生input上传图片

   <div class="imgFive">

       <div class="bigimg myfiveImg1" :class="{active1:activeIx===1}"  @click="clickImg(1)"></div>
       <div class="bigimg myfiveImg2" :class="{active2:activeIx===2}" @click="clickImg(2)">
         <input type="file" ref="img_uploads" class="img_upload" @change="fileImage($event,'img')" accept="image/jpeg,image/png,image/jpeg">
         <!-- v-if="activeIx==2" -->
       </div>
       <div class="bigimg myfiveImg3" :class="{active3:activeIx===3}" @click="clickImg(3)"></div>
       <div class="bigimg myfiveImg4" :class="{active4:activeIx===4}" @click="clickImg(4)">
          <input type="file" ref="img_uploads_two" class="img_upload" @change="fileImage($event,'pdf')" accept="application/pdf">
          <!-- v-if="activeIx==4" -->
       </div>
       <div class="bigimg myfiveImg5" :class="{active5:activeIx===5}" @click="clickImg(5)">
          <!-- v-if="activeIx==5" -->

          <input type="file"  ref="img_uploads_three" class="img_upload" @change="fileImage($event,'video')" accept="video/mp4" >
       </div>

      </div>


.imgFive{
      margin-top:.24rem;
      display: flex;
      justify-content:  space-between;
      .bigimg{
        width: 1.04rem;
        height: 1.04rem;
        &.myfiveImg1{
          background: url('~@/assets/verbalAndMaterialImgs/gray_text.png') no-repeat;
          background-size: 100% 100%;
        }
        &.myfiveImg2{
          background: url('~@/assets/verbalAndMaterialImgs/gray_img.png') no-repeat;
          background-size: 100% 100%;
          position: relative;
          .img_upload{
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1000;
          }
        }
        &.myfiveImg3{
          background: url('~@/assets/verbalAndMaterialImgs/gray_imgAndText.png') no-repeat;
          background-size: 100% 100%;
        }
        &.myfiveImg4{
          background: url('~@/assets/verbalAndMaterialImgs/gray_pdf.png') no-repeat;
          background-size: 100% 100%;
          position: relative;
          .img_upload{
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1000;
          }
        }
        &.myfiveImg5{
          background: url('~@/assets/verbalAndMaterialImgs/gray_video.png') no-repeat;
          background-size: 100% 100%;
          position: relative;
          .img_upload{  让input定位在图片上
            position: absolute;
            left:0;
            top:0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 1000;
          }
        }
        &.active1{
          background: url('~@/assets/verbalAndMaterialImgs/checked_text.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active2{
          background: url('~@/assets/verbalAndMaterialImgs/checked_img.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active3{
          background: url('~@/assets/verbalAndMaterialImgs/checked_imgAndText.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active4{
          background: url('~@/assets/verbalAndMaterialImgs/checked_pdf.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active5{
           background: url('~@/assets/verbalAndMaterialImgs/checked_video.png') no-repeat;
          background-size: 100% 100%;
        }

      }
    }


+

    // 上传图片
    fileImage(e, type) {
      const files = e.target.files
      var imgSize = e.target.files[0].size / 1024 / 1024
      if (type === 'img') {
        if (imgSize > 2) {
          this.$toast.fail('请上传大小不要超过2M的图片')
          return
        }
      }
      if (type === 'pdf') {
        if (imgSize > 20) {
          this.$toast.fail('请上传大小不要超过20M的文件')
          return
        }
      }
      if (type === 'video') {
        if (imgSize > 10) {
          this.$toast.fail('请上传大小不要超过10M的文件')
          return
        }
      }
      const dataone = new FormData()
      dataone.append('file', files[0]) // 上传的是 File 对象
      fileUpload(dataone).then(res => {
        this.fileList = {
          id: res.data.id,
          url: res.data.filePath,
          size: res.data.fileSize,
          name: res.data.fileName,
          suffix: res.data.fileFormat
        }
        if (type === 'img') {
          // fileListImg fileListPdf fileListVideo 暂存数据
          this.fileListImg = JSON.parse(JSON.stringify(this.fileList))
       
        }
        if (type === 'pdf') {
          this.fileListPdf = JSON.parse(JSON.stringify(this.fileList))
          // this.mypdfinfo.linkName = this.fileListPdf.name
          this.mypdfinfo.radarUrlTitle = this.fileListPdf.name
       
        }
        if (type === 'video') {
          this.fileListVideo = JSON.parse(JSON.stringify(this.fileList))
          this.$set(this.myvideoinfo, 'linkUrl', this.fileListVideo.url)
          
        }
      })
    },


+ 重新上传
+ 
  edit_text(ix) { // 修改
      if (ix === 1) {
        this.$refs.insertText.open(this.form.content)
      }
      if (ix === 2) {
        this.$nextTick(() => {
          this.$refs.img_uploads.click()
        })
      }
      if (ix === 3) {
        this.$refs.textAndimg.open(this.form, 'edit')
      }
      if (ix === 4) {
        this.$nextTick(() => {
          this.$refs.img_uploads_two.click()
        })
      }
      if (ix === 5) {
        this.$nextTick(() => {
          this.$refs.img_uploads_three.click()
        })
      }
    },

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试