Question

我有表单编辑，我需要更改名称，标题但不要更改图像并保留旧图像。在模板中我有HTML代码

             <div class="form-group">
              <label>Image</label>
              <input type="file"  v-on:change="onImageChange">
            </div>

但是input type="file"无法使用v-model，我有函数使用createImage in form create

  onImageChange(e) {
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length)
      return;
    this.createImage(files[0]);
  },
  createImage(file) {
    let reader = new FileReader();
    let vm = this;
    reader.onload = (e) => {
    vm.list.image = e.target.result;
  };
  reader.readAsDataURL(file);
  },

如何编辑以保留旧图像名称而无需重新添加？谢谢

Answer 1

所以你想获得图像的原始名称？只需按照：

<input type="file" @change="fileUploaded" />
<button @click="upload">Upload</button>

和脚本：

  export default {
    data(){
     selectedFile: null
    },
    methods: {
      fileUploaded(event) {
        console.log(event.target.files[0].name) //here is the original name
        this.selectedFile = event.target.files[0]
      },
      upload() {
       let fd = new FormatData()
       fd.append('image', this.selectedFile, 'GiveItAnotherNameHere')
       axios.post('url', fd) //upload it to backend
      }
    }
  }

虽然，有很多关于vue.js上传图片的教程。我喜欢this并建议您关注。他们也提供了源代码和演示。

如何在编辑VueJS中获取旧图像？

1 个答案: