Vue项目中的文件上传成功但不加载

Vue项目中的文件上传成功但不加载

---

1. 只是因为在数据传递过程中，名称不统一导致的，导致在dataList方法中没有及时更新。
2. 在Vuex中采用dataList呈放数据，却在更新时采用的list，导致上传后更新了list数组，没有对dataList进行更新.
3. 还有图片地址在上传后自动添加http://127.0.0.1:8080/，所以在存储时保存路径前不应有 " / "

---

html中呈放数据采用el框架

<el-table :data="dataList"..>..</..>

提供数据的方法

dataList: function () {
      return this.$store.state.dataList;
},

在Vuex的mutations更新数据采用

state: {
	dataList:[],
	totalNumber: 0,
}

[GET_BRAND_LIST](state, data) {
      Vue.set(state, "dataList", data.list); //""中之前使用的为list
      Vue.set(state, "totalNumber", data.totalNumber);
      // console.log(state.brand);
    },

actions请求代码

[GET_LIST](context, data) {
      Vue.prototype.$axios.post('list', {
        ...data
      })
          .then(response => {
        // 提交mutation
        context.commit(GET_BRAND_LIST, {
          // 根据上行数据来进行处理
          list: response.data.data,
          totalNumber: response.data.totalNumber
        });
      })
          .catch(error => {
        Vue.prototype.$message.error('网络连接错误，数据获取失败');
      });
    },

Vuex中添加请求即上传文件

// actions
[ADD_INFO](context, data) {
      // 向后端发送新增请求 - 例如GET中

      let id = Date.now();   // 该 id从后端返回，这里是假数据
      // 提交 mutation
      context.commit(ADD_INFO, {
        id,
        ...data.formData,
      });
      Vue.prototype.$message.success("新增数据成功!");
    },

// mutations
[ADD_INFO](state, data) {
      if(state.dataList.length >= 10) {// 超出当页总数
        // 先移除数组中的最后一个数据
        state.dataList.splice(state.dataList.length - 1, 1);
      }
      // 在数组第一位添加新数据 第二个参数为0为添加
      state.dataList.splice(0, 0, data);
    },