@south-rd/smarthub-file v1.0.3

smart-file

本地项目初始化

yarn install

查看例子

yarn dev

组件打包

yarn run lib

基于 elementui，使用响应式处理元素 PC、手机样式

本地开发调试

本地项目 执行组件打包命令

yarn run lib

开启文件链接

yarn link

本地项目环境安装本组件

项目链接引用

yarn link @south-rd/smarthub-file

引入组件

import smarthubFile from '@south-rd/smarthub-file'
import '@south-rd/smarthub-file/lib/smarthub-file.css'
Vue.use(smarthubFile)

使用组件

组件名称

<smarthub-file></smarthub-file>

组件参数

defaultObj{
    action: "https://ssu.smarket.com.cn/v1/file/upload",//上传图片地址
    initUrl: "https://ssu.smarket.com.cn",//文件回显地址
    fileType: "",
    icon:'",
    type: "img", //img为方框上传图片,btn为按钮上传文件显示图片,file为按钮上传文件显示文件,drag拖拽上传
    title: "点击上传",//按钮上传中按钮文字
    text: "只能上传jpg/png文件，且不超过500kb",//按钮下面提示信息
    fileList: [//按钮上传图片回显
        name: "",
        url: "",
    ],
}
headers:{}//上传传请求头
disabled=""//是否禁用默认false
showList=""//是否展示列表默认true展示

触发事件

delImage(file, fileList){}//删除事件
onSuccess(response, imageUrl){}//上传成功触发

 <smarthubFile :defaultObj="defaultObj" :headers="headers" :onFileChange="onFileChange" ref="file"/>

 <script>
export default {
  name: "App",
  data() {
    return {
      defaultObj: {
        action: "https://ssu.smarket.com.cn/v1/file/upload",
        initUrl: "https://ssu.smarket.com.cn",
        type: "drag", //img为方框上传,imgbtn为按钮上传图片,file为上传文件,drag为拖拽上传
        title: "点击", //除了type=img其它必填
        text: "", //选填
        imageUrl: "", //必填
        fileList: [
          //type不为img的情况下必填回显使用的
          {
            name: "",
            url: "",
          },
        ], //回显
      },
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiJ9.MTYxNDkxNTAwOTQxODAwMTEwODMy.OkR0vLad0-EoMV1z6ZJ7M8hY7Kmd7WT8-CpWWscrYlA",
      },
    };
  },
  methods: {
    // onFileChange(file,defaObj) {//上传成功失败是触发
    //
    // },
     // clear() {//清空
    //   this.$refs["file"].clearFiles();
    // },
    //delImage(file, fileList){}//删除事件
    // onFileChange(file, defaultObj) {
    //   console.log("change", file, defaultObj);
    // },
    // onSuccess(response, imageUrl) {//上传成功的事件触发
    //   console.log(response, imageUrl);
    // },
  },
};
</script>