用两支 API 实作新增资料与上传档案

实作新增资料与上传档案有两种做法

1. 开一支 API 处理新增使用者，设定成 multipart/form-data 就可以同时上传档案和使用者资料。
2. 开一支上传档案的 API，处理档案，另一支就处理要储存到资料库的使用者资料。上传之後的 path 放在资料库的任务就交给了前端。

在讲的是第二种方法，想要在 POST User 时，先上传大头照，再把 path 放到使用者资料。

之後会专门写一篇文章，讲「多个动作的同步资料整理」。

API 文件

遇到这种 API，怎麽做呢？

POST /user/:id

request body

{
  name: 'chris',
  avatar: 'http://127.0.0.1/img/user_1.jpg'
}

**response 200 **

(略)

POST /file

request header

{
  'Content-Type': 'multipart/form-data'
}

request body

form-data

{
  file: (binary)
}

**response 200 **

{
  data: '/file/:file_path'
}

依照 API 文件写 vuex

依前几天建立的默契，可以知道

1. state 要建立 file

  state: {
    file: null
  },

2. mutations 要建立 file

  mutations: {
    file(state, payload) {
      state.file = payload
    }
  },

3. getters 要建立 file

  getters: {
    file: state => state.file
  },

这些一定要做。

1. 避免直接存取资料
2. 需要时可以挡住格式不符
3. 可以使用 devtool 的 hook
4. 增加资料的抽象化

另外特别的地方

1. 资料直送的情况，mutation 和 getters 的命名要相同。
2. 资料有特别处理，会增加不同名字的 getters。

所以

要 file 可以用 $store.getters.file 就取得

@/store/actions.js

import backendAPI from '@/utility/backendAPI.js'

export default {
  async uploadFile({ commit, getters }) {
    const file = getters.file;
    const res = await backendAPI.formDataPOST(`/file`, { file })
    return res.data
  }
  // ...
}

src/store/user/actions.js

在 createUser 上面加上 uploadFile

import backendAPI from '@/utility/backendAPI.js'

export default {
  async createUser({ dispatch, getters }, { name }) {
    if (getters.file != null) {
  	  const res = await dispatch('uploadFile');
      await backendAPI.POST(`/user`, {
        name,
        avatar: res.data,
      });
    } else {
      await backendAPI.POST(`/user`, {
        name,
      });
    }
  },
  // ...
}

在新增时就可以直接

    onSubmit() {
      this.$store.dispatch('createUser', this.$store.getters.user);
    }

另一种不推荐的做法

直接在选取完档案之後，就将档案先上传。而不是等到要新增人员时才上传。

缺点: 在一次修改的过程中，不断的换掉档案，就会不断的上传，导致服务器上的垃圾档案会更新变多。