vue实现文件上传样式修改

最新推荐文章于 2023-10-20 19:11:36 发布

榴莲豆包

最新推荐文章于 2023-10-20 19:11:36 发布

阅读量518

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41992943/article/details/128369983

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

主代码：

<div class="wxchatIcon1" >

                <input  ref="uploadImage" accept="image/*" style="display: none" type="file" id="file"  @change="handleUploadSuccess"/>

                <i @click="choiceImg" style="fontSize:'18px',fontWeight:'bold',padding:10px" class="el-icon-picture" ></i>

            </div>

style

.wxchatIcon1 {
  display: inline-block;
    padding: 8px 10px 0px 30px;
    width: 40px;
    font-size: 20px;
  }

 //图片发送
    choiceImg(){
      this.$refs.uploadImage.click();
    },
    handleUploadSuccess() {
      var thit = this;
      const input = thit.$refs.uploadImage;
      const file = input.files[0];
      // let dialogImageUrl = this.dataObj.host + '/' + this.dataObj.key.replace('${filename}', file.name);
      let reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = function (e) {
          let res = e.target.result;//ArrayBuffer
          let buf = Buffer.from(res);//Buffer
          var Minio = require('minio')
          var minioClient = new Minio.Client({
            endPoint: '127.0.0.1',
            port: 19000,
            useSSL: false,
            accessKey: 'admin',
            secretKey: '123456'
          });
      minioClient.putObject('chat', file.name, buf, null, file.size, function (err, data) {
          if (err)
              console.log(err)
          else
          var msgimg = {"type":"send","send_id":thit.uid,"receive_id":thit.chooseId,"msg_type":"4","content":"http://113.156.111.000:19000/chat/"+file.name};
          if (thit.$webSocket.ws && thit.$webSocket.ws.readyState == 1) {
            thit.$webSocket.ws.send(JSON.stringify(msgimg));
          }
          setTimeout(() => {
            thit.getChatList();
          }, 300)
      });
      }

    },