Vue+axios+Node+express實現檔案上傳(使用者頭像上傳)

ZONE_98F發表於2019-02-16
VueiOSExpress

Vue 頁面的程式碼

<label for=`my_file` class="theme-color">
  <mu-icon left value="backup"></mu-icon>
  修改頭像
</label>
<input type="file" ref="upload" name="avatar" id=`my_file` style="display:none;" accept="image/jpg" @change="changeAvatar" />

axios介面

let ChangeAvatar = (img) => axios({
  url: `/user/changeavatar`,
  method: `post`,
  anync: true,
  contentType: false,
  processData: false,
  data: img
})

js部分呼叫封裝的介面

  methods: {
    changeAvatar (event) {
      let img = event.target.files[0];
      let size = img.size;
      if (size > 3145728) {
        alert(`請選擇3M以內的圖片！`);
        return false;
      }
      let Form = new FormData();
      Form.append(`avatar`, img, this.avatar_name);
      API.ChangeAvatar(Form)
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
  • 在這裡我並沒有用form方式，而是將input隱藏，用label繫結input，當我們點選label的時候，也就點選了input
  • 我將請求封裝在了另一個檔案裡，為ChangeAvatar()函式，如果不封裝，按常規寫法一樣是可以的
  • Form.append(`avatar`, img, this.avatar_name);第一個引數為input的name,第二個引數為檔案物件，第三個引數為檔案的名字
  • ajax new FormData() 方法提交檔案時，不能用data:{a:1}的鍵值對方法提交，應當直接將檔案物件提交data:FormData

後臺node程式碼

const fileUpload = require(`express-fileupload`);
app.use(fileUpload());

app.post(`/user/changeavatar`, function(req, res) {
  console.log(req.files); // the uploaded file object
  let avatar = req.files.avatar;

  // Use the mv() method to place the file somewhere on your server
  avatar.mv(`dist/static/img/avatar/`+req.files.avatar.name+`.jpg`, function(err) {
    if (err)
      return res.status(500).send(err);

    res.send(`File uploaded!`);
  });
})

程式碼執行，成功將圖片上傳到了指定目錄

相關文章