用el-upload上传附件,怎么才能把附件赋值到输入框里去呢vue

菜鸟也能高飞
  • 57

<template>
<el-upload

          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleChange"
          :file-list="fileList">
          <el-button size="small" type="primary">  
            <img src="../public/images/annex.png" class="annex"/>
          </el-button>

</el-upload>
<div class="bottom_left">

      <div @keydown="messageInput" @click="showEmoji1=false">
        <div_edit_model id="test" contenteditable="true" data-text="" v-model="msg"></div_edit_model>
      </div>
      <!-- 发送按钮 -->
      <div class="warn1" v-show="warn1">不能发送空白信息</div>
      <span class="send1" @click="messageInput($event)">发送</span>
    </div>

</template>
<script>
export default {
name: 'userClient',
data () {
return {
// 上传附件
fileList: [{

  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  // }, {
  //   name: 'food2.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
  }
]

}
}
methods: {
// 上传附件
handleChange(file, fileList) {
this.fileList = fileList.slice(-3);
},
// 绑定回车键和发送按钮,以及不能发送空白消息

messageInput (e) {
  let vm = this  
  let msg = vm.msg.replace(/^\s+|\s+$/g, '');
  let oTest = document.getElementById('test');
  if(msg=='' && (e.which === 13 || e.target.classList.contains('send1'))){
    oTest.value = ''   //输入框是div的用
    vm.warn1 = true
    setTimeout(() => {
      vm.warn1 = false
    }, 1000)
  }else{
    if ((e.which === 13 && vm.msg) || (e.target.classList.contains('send1') && vm.msg)) {
      e.preventDefault()
      socket.emit('message', vm.currentRoomID, msg)
      vm.msg = ''
      // oTest.value = ''   //输入框是div的用
    }
  }
},

}
}
图片描述

回复
阅读 3.1k
1 个回答

<input type="hidden" v-model="inputValue">

<el-upload ... on-success="success_handle" ... />

data(){
return {

inputValue:''

}
},
methods:{
...
success_handle(response,file,fileList) {

//根据将response返回的值赋值给inputValue
this.inputValue = response.YOUR_FIELDS

}
...
}

宣传栏