vuejs 는 FormData 를 사용 하여 ajax 업로드 이미지 파일 을 실현 합 니 다.

저 는 vuejs 를 사용 하 는 많은 친구 들 이 ajax 로 사진 을 올 리 는 수요 가 있다 고 믿 습 니 다.앞 뒤 가 분 리 된 후에 저 희 는 ajax 로 데이터 문 제 를 해결 할 수 있 기 를 바 랍 니 다.전통 적 인 폼 제출 은 제출 이 성공 한 후에 페이지 가 뛰 어 넘 고 ajax 를 사용 하면 사진 등 파일 을 새로 고침 하지 않 을 수 있 습 니 다.
사실 이미 친구 가 관련 npm 가방 을 봉 했 지만 저 는 원생 의 js api 로 이 루어 졌 다 고 말 하고 싶 습 니 다.코드 도 많이 사용 하지 않 고 더욱 유연 하 며 원생 을 사용 할 수 있 으 면 가능 한 한 원생 을 사용 하 라 고 말 하고 싶 습 니 다.다음은 간단 한 프로필 사진 으로 어떻게 사용 하 는 지 설명 한다.
효과 도

전단 실현

<template>
 <div class="admin">
 <div class="admin-content">
  <div class="edit">
  <div class="avatar">
   <div class="img">
   <img :src="avatar" @click="setAvatar">
   <span>  </span>
   </div>
   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput">
  </div>
  <button type="button" @click="edit">    </button>
  </div>
 </div>
 </div>
</template>
<script>
export default {
 data() {
 return {
  avatar: this.$store.state.administrator.avatar,
 }
 },
 methods: {
 edit() {
  //      
  if (this.$refs.avatarInput.files.length !== 0) {
   var image = new FormData()
   image.append('avatar', this.$refs.avatarInput.files[0])
   this.axios.post('/avatar', image, {
   headers: {
    "Content-Type": "multipart/form-data"
   }
   })
  }
  }) 
 },
 setAvatar() {
  this.$refs.avatarInput.click()
 },
 changeImage(e) {
  var file = e.target.files[0]
  var reader = new FileReader()
  var that = this
  reader.readAsDataURL(file)
  reader.onload = function(e) {
  that.avatar = this.result
  }
 }
 }
}
</script>

위 코드 의 뜻 을 설명 합 니 다.그림 을 클릭 하면 setAvatar 함수 가 실 행 됩 니 다.이 함 수 는 input 의 click 이 벤트 를 촉발 합 니 다.그래서 파일 선택 상 자 를 팝 업 합 니 다.그림 을 선택 한 후에 chageImage 함 수 를 터치 합 니 다.이 함수 의 기능 은 업로드 한 그림 을 미리 보 는 것 입 니 다.나중에 수정 단 추 를 누 르 면 자원 을 백 엔 드 로 전달 합 니 다.
백 엔 드 처리
백 엔 드 에서 올 린 자원 을 받 았 습 니 다.서버 에 자원 을 저장 해 야 합 니 다.Nodejs 로 설명 하 겠 습 니 다.저 는 formidable 로 올 린 데 이 터 를 분석 하 겠 습 니 다.

exports.avatar = function(req, res, next) {
 let form = new formidable.IncomingForm()
 form.parse(req, function(err, fields, files) {
 if (err) {
  return res.json({
  "code": 500,
  "message": "       "
  })
 }

 //      
 let extname = path.extname(files.avatar.name)
 let oldpath = files.avatar.path;
 let newpath = './public/avatar' + extname;
 let avatarName = 'avatar' + extname;
 //        
 fs.rename(oldpath, newpath, function(err) {
  if (err) {
  return res.json({
   "code": 401,
   "message": "      "
  })
  }
 })
 //      
 db.updateMany('users', { "user": username }, { "avatar": avatarName },
  function(err, result) {
  if (err) {
   return res.json({
   "code": 401,
   "message": "      "
   })
  }
  return res.json({
   "code":200,
   "message": "      "
  })
  })
 })
}

백 엔 드 에서 ajax 가 제출 한 데 이 터 를 분석 하 는 것 은 전통 적 인 폼 으로 제출 한 데이터 방법 과 마찬가지 로 전단 개발 을 한다 면 백 엔 드 코드 의 영향 을 잘 모 릅 니 다.
이렇게 많은 말 을 했 으 니 demo 를 하 는 것 이 좋 겠 습 니 다https://github.com/wmui/vueblog이 작은 프로젝트 배경 에 이미지 수정 기능 이 있 습 니 다.ajax 를 사용 하여 사진 을 올 리 는 것 입 니 다.핵심 코드 는 백 줄 이 안 되 고 앞 뒤 가 분 리 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.