vue实现文件上传样式修改

最新推荐文章于 2025-10-31 09:07:13 发布

原创最新推荐文章于 2025-10-31 09:07:13 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

65 篇文章

订阅专栏

本文介绍了如何在前端通过JavaScript实现文件上传，并利用Node.js的Minio库将图片存储到本地服务器192.168.1.1:19000的聊天文件夹中，同时发送消息到WebSocket连接的接收方。

主代码：

<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)
      });
      }

    },