我想在 Vue.js 中更改上传文件的 .name

Question

所以我有这个文件输入，用户可以在其中选择图像。但是一旦我有了这张图片，我只想更改名称，例如，用户上传 "wallpaper_hd_dragonball_z.jpg"，我希望它被命名为 "wallpaper.jpg"。这是输入：

<input type="file" @change="uploadImage($event,userDetails.email)">

这是它调用的将图像存储在数据库中的函数：

uploadImage(e, email){
  this.selectedFile = e.target.files[0];
  console.log(this.selectedFile.name);
  var storageRef = firebaseApp.storage().ref(`profilePics/${email}/${this.selectedFile.name}`);
  const task = storageRef.put(this.selectedFile);

  task.on('state_changed',snapshot=>{
    let percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
    this.uploadValue = percentage;
  }, error=>{console.log(error.message)},
  ()=>{this.uploadValue=100;
    task.snapshot.ref.getDownloadURL().then((url)=>{
      this.picture = url;
      console.log(this.picture);
    })
  })
}

基本上我正在尝试的是：

  this.selectedFile.name = "profPic.jpg";
  console.log(this.selectedFile.name);

但是没用。我环顾四周 google，但找不到该怎么做。

Answer 1

您不必更改内存中文件的名称，因为 File 对象的名称属性是只读的。

相反，只需重命名您将保存在 Firebase 存储中的文件。

function getFileExtension(fileName) {
  return filename.split('.').pop();
}

//...
  const fileExtension = getFileExtension(this.selectedFile.name);
  var storageRef = firebaseApp.storage().ref(`profilePics/${email}/wallpaper.${fileExtension}`);
  storageRef.put(this.selectedFile);
  // ...

或者创建一个新的文件对象，使用另一个名称。


const myNewFile = new File([this.selectedFile], 'wallpaper.png', {type: myFile.type});
firebaseApp.storage().ref(`profilePics/${email}/${myNewFile.name}`);
storageRef.put(myNewFile);
// ...

我想在 Vue.js 中更改上传文件的 .name

I want to change the .name of an uploaded filein Vue.js

html

vue.js

quasar-framework