018檔案上傳及雲端儲存

1 修改index.vue

此程式碼可以上傳檔案
進入C:\htmlstudy\weixin\todos\src\components下的檔案

<template>
  <div>
    <div class="box-card">
      <el-card shadow="always">
        <el-input v-model="adddata.title" placeholder="請輸入內容">
          <
 
el-button slot="append" @click="addtodo">新增任務</el-button>
        </el-input>
      </el-card>
    </div>

    <el-card class="box-card">
      <div v-for="(todo, key) in todos" :key="key" class="text item">
 

        <template v-if="todo.done == false">
          <div class="lists">
            <el-checkbox v-model="todo.done" @change="todoDone(key)">
              {{ todo.title }}
            </el-checkbox>
            <div>
              <
 
i class="el-icon-notebook-2" @click="showTodo(key)"></i>
              <i class="el-icon-delete" @click="deleteTodo(key)"></i>
            </div>
          </div>
          <el-divider></el-divider>
        </template>
      </div>
    </el-card>

    <el-drawer title="任務詳情" :visible.sync="drawer">
      <div class="dra">
        <p>任務 : {{ drawerTodo.title }}</p>
        <p>
          附件：
          <br />
          <img :src="drawerTodo.tempfile" alt="" />
        </p>
        <p>
          <input type="file" ref="fil" />
          <el-button @click="upFile(drawerTodo._id)">點選上傳</el-button>
        </p>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "helloworld",
  data() {
    return {
      adddata: {
        title: "",
      },
      todos: [],
      drawer: false,
      drawerTodo: {},
    };
  },
  methods: {
    async addtodo() {
      var addtododata = this.adddata;
      var back = await this.$cloudbase.callFunction({
        name: "addtodo",
        data: addtododata,
      });
      console.log(back);
      this.getdata();
    },
    async getdata() {
      var back = await this.$cloudbase.callFunction({
        name: "gettodo",
      });
      this.todos = back.result.data;
      console.log(this.todos);
    },
    async deleteTodo(key) {
      var todoinfo = this.todos[key];
      var back = await this.$cloudbase.callFunction({
        name: "deltodo",
        data: { _id: todoinfo._id },
      });
      /* this.todos = back.result.data; */
      console.log(back);
      this.getdata();
    },
    async showTodo(key) {
      var todoInfo = this.todos[key];
      console.log(todoInfo.fileId);
      var back = await this.$cloudbase.getTempFileURL({
        fileList: [todoInfo.fileId],
      });
      this.drawerTodo = todoInfo;
      this.drawerTodo.tempfile=back.fileList[0].tempFileURL;
      this.drawer = true;
    },
    async upFile(id) {
      var s = this.$refs.fil.files[0];
      console.log(s);
      var back = await this.$cloudbase.uploadFile({
        //雲端儲存的路徑
        cloudPath: "todo/" + Date.now() + "&" + s.name,
        //需要上傳的檔案，File型別
        filePath: this.$refs.fil.files[0],
      });
      console.log(id, back);
      //back.fileID
      var changeData = {
        _id: id,
        fileId: back.fileID,
      };
      console.log(changeData);
      var changeback = await this.$cloudbase.callFunction({
        name: "puttodo",
        data: changeData,
      });
      console.log(changeback);
      await this.getdata();
    },

    async gettodo() {
      var back = await this.$cloudbase.callFunction({
        name: "gettodo",
      });
      console.log(back);
    },
  },
  mounted() {
    var auth = this.$cloudbase.auth();
    auth.anonymousAuthProvider().signIn();
    this.getdata();
  },
};
</script>


<style>
.dsb {
  color: #606266;
}
.text {
  font-size: 14px;
}
.box-card {
  margin: 0 auto;
  width: 580px;
  margin-bottom: 20px;
}
.lists {
  display: flex;
  justify-content: space-between;
}
</style>

2 修改todos下的cloudbaserc.json程式碼

{
  "version": "2.0",
  "envId": "lagou-1gox9hn0f8a023c3",
  "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
  "functionRoot": "cloudfunctions",
  "framework": {
    "name": "vue",
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/vue",
          "envVariables": {
            "VUE_APP_ENV_ID": "{{env.ENV_ID}}"
          }
        }
      },
      "server": {
        "use": "@cloudbase/framework-plugin-function",
        "inputs": {
          "functionRootPath": "cloudfunctions",
          "functions": [
            {
              "name": "gettodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            },
            {
              "name": "deltodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            },
            {
              "name": "addtodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            },
            {
              "name": "puttodo",
              "timeout": 5,
              "envVariables": {},
              "runtime": "Nodejs10.15",
              "memory": 128,
              "aclRule": {
                "invoke": true
              }
            }
          ]
        }
      },
      "auth": {
        "use": "@cloudbase/framework-plugin-auth",
        "inputs": {
          "configs": [
            {
              "platform": "NONLOGIN",
              "status": "ENABLE"
            }
          ]
        }
      }
    }
  },
  "functions": [],
  "region": "ap-shanghai"
}

3 在cloudfunctions目錄下新建puttodo目錄

4 copy addtodo中的3個檔案、一個資料夾到puttodo目錄

5 修改 puttodo中index.js

const cloud = require('./clouddb')

async function puttodo(event) {
  var req=event;
  if(req._id==undefined){
    return;
}

const backdata=await cloud.collection('todo').doc(req._id).update({fileId:req.fileId})
return backdata
}

exports.main = async (event, context) => {
  return puttodo(event);
};

6 部署

tcb
或
tcb fn code update puttodo