vue 前端图片粘贴上传

最新推荐文章于 2024-05-12 02:28:17 发布

好想。

最新推荐文章于 2024-05-12 02:28:17 发布

阅读量1.4k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44726587/article/details/126893096

版权

<template>
  <div>
    <el-input type="textarea" @paste.native.capture.prevent="pasting" v-model="textMsg" placeholder="请输入..."></el-input>
    <span v-for="item in  fileList" style="margin-left: 10px;">
      <img :src="baseUrl+item.fileName" alt="" style="width: 100px;" :data-source="baseUrl+item.fileName" v-viewer>
      <i @click="handleRemove(item.fileName,fileList)" class="el-icon-delete-solid"></i>
    </span>
  </div>
</template>

这是页面部分输入框和图片的显示，直接粘贴图片就可以显示了

一下是js部分,主要粘贴，删除和上传图片，有些东西要自己看着改一下

handleRemove(file, fileList) {
        console.log(file, fileList);
        for (let i in this.fileList) {
          if (file === this.fileList[i].fileName) {
            this.fileList.splice(i, 1);
            this.$message('删除成功')
            let arry = []
            let msg = this.textMsg
            arry.push(msg)
            arry.push(this.fileList)
            this.$emit("input", arry);
          }
        }
      },
      // 监听粘贴事件
      pasting(event) {
        let txt = event.clipboardData.getData('Text')
        console.log(event.clipboardData.getData('Text'))
        if (typeof (txt) == 'string') {
          this.textMsg += txt
        }
        let file = null
        const items = (event.clipboardData || window.clipboardData).items
        console.log(items)
        if (items.length) {
          for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
              file = items[i].getAsFile()
              console.log(file)
              this.handleChange(file)
              if (!this.canUpload) {
                this.canUpload = !this.canUpload;
              }
              break
            }
          }
        }
      },
      // 上传
      handleChange(file, filelist) {
        console.log(file, filelist);
        let url = process.env.VUE_APP_BASE_API + '/common/upload'
        let token = {
          Authorization: "Bearer " + getToken()
        }
        console.log(file, filelist)
        let formData = new FormData()
        formData.append('file', file.raw || file)
        axios.post(
            url, formData, {
              headers: {
                'Content-type': 'multipart/form-data',
                bwToken: token
              }
            }
          ).then(res => {
            console.log(res, '1321312321')
            let obj = new Object();
            obj.url = res.data.url
            obj.fileName = res.data.fileName
            obj.name = res.data.fileName.split('/').slice(-1).join();
            this.fileList.push(obj)
            console.log(this.fileList)
            let arry = []
            let msg = this.textMsg
            arry.push(msg)
            arry.push(this.fileList)
            this.$emit("input", arry);
          })
          .catch(err => {
            console.log(err)
          })
      },

完整代码,实现粘贴图片上传

<template>
  <div>
    <el-input type="textarea" @paste.native.capture.prevent="pasting" v-model="textMsg" placeholder="请输入..."></el-input>
    <span v-for="item in  fileList" style="margin-left: 10px;">
      <img :src="baseUrl+item.fileName" alt="" style="width: 100px;" :data-source="baseUrl+item.fileName" v-viewer>
      <i @click="handleRemove(item.fileName,fileList)" class="el-icon-delete-solid"></i>
    </span>
  </div>
</template>

<script>
  const axios = require('axios');
  import API_CONFIG from "../../../vue.config"

  import {
    getToken
  } from "@/utils/auth";

  export default {
    props: {
      List: {
        default: null,
      },
      text: {}
    },
    data() {
      return {
        textMsg: '',
        fileList: [],
        baseUrl: '',

      };
    },
    created() {
      this.textMsg = this.text
      this.baseUrl = API_CONFIG.devServer.proxy['/dev-api'].target

    },
    mounted() {
      this.fileList = []
      if (this.List) {
        for (let i = 0; i < this.List.length; i++) {
          this.fileList.push({
            name: this.List[i],
            url: this.List[i],
            fileName: this.List[i],
            response: {
              fileName: this.List[i]
            }
          })

        }
        console.log('回显的文件信息', this.fileList);
      }
    },
    watch: {
      text() {
        this.textMsg = this.text
      },
      List() {
        // console.log('List', this.List);
        this.fileList = []
        if (this.List) {
          for (let i = 0; i < this.List.length; i++) {
            this.fileList.push({
              name: this.List[i],
              url: this.List[i],
              fileName: this.List[i],

              response: {
                fileName: this.List[i]
              }
            })

          }
          console.log('回显的文件信息', this.fileList);
        }

      },
      textMsg() {
        let arry = []
        let msg = this.textMsg
        arry.push(msg)
        arry.push(this.fileList)
        this.$emit("input", arry);
      }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
        for (let i in this.fileList) {
          if (file === this.fileList[i].fileName) {
            this.fileList.splice(i, 1);
            this.$message('删除成功')
            let arry = []
            let msg = this.textMsg
            arry.push(msg)
            arry.push(this.fileList)
            this.$emit("input", arry);
          }
        }
      },
      // 监听粘贴事件
      pasting(event) {
        let txt = event.clipboardData.getData('Text')
        console.log(event.clipboardData.getData('Text'))
        if (typeof (txt) == 'string') {
          this.textMsg += txt
        }
        let file = null
        const items = (event.clipboardData || window.clipboardData).items
        console.log(items)
        if (items.length) {
          for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
              file = items[i].getAsFile()
              console.log(file)
              this.handleChange(file)
              if (!this.canUpload) {
                this.canUpload = !this.canUpload;
              }
              break
            }
          }
        }
      },
      // 上传
      handleChange(file, filelist) {
        console.log(file, filelist);
        let url = process.env.VUE_APP_BASE_API + '/common/upload'
        let token = {
          Authorization: "Bearer " + getToken()
        }
        console.log(file, filelist)
        let formData = new FormData()
        formData.append('file', file.raw || file)
        axios.post(
            url, formData, {
              headers: {
                'Content-type': 'multipart/form-data',
                bwToken: token
              }
            }
          ).then(res => {
            console.log(res, '1321312321')
            let obj = new Object();
            obj.url = res.data.url
            obj.fileName = res.data.fileName
            obj.name = res.data.fileName.split('/').slice(-1).join();
            this.fileList.push(obj)
            console.log(this.fileList)
            let arry = []
            let msg = this.textMsg
            arry.push(msg)
            arry.push(this.fileList)
            this.$emit("input", arry);
          })
          .catch(err => {
            console.log(err)
          })
      },
    }
  };

</script>
<style lang="scss" scoped>
  .main {
    margin: 50px 300px;
  }

  .upload-demo {
    margin-top: 30px;
  }

</style>