(window.webpackJsonp = window.webpackJsonp || []).push([ [29], { 394: function(t, s, a) { 'use strict'; a.r(s); var n = a(42), p = Object(n.a)( {}, function() { var t = this, s = t.$createElement, a = t._self._c || s; return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [ a('p', [ a('strong', [t._v('H5-Dooring')]), t._v('全面支持第三方对象存储服务, 我们以七牛云对象存储为例.'), ]), t._v(' '), a('h3', { attrs: { id: '前端上传文件到oss' } }, [ a('a', { staticClass: 'header-anchor', attrs: { href: '#前端上传文件到oss' } }, [ t._v('#'), ]), t._v(' 前端上传文件到oss'), ]), t._v(' '), a('p', [ t._v( '首先我们需要在第三方对象储存服务中配置对应的服务和域名. 其次安装对应的sdk, 如七牛云sdk:', ), ]), t._v(' '), a('div', { staticClass: 'language-js extra-class' }, [ a('pre', { pre: !0, attrs: { class: 'language-js' } }, [ a('code', [ a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('*')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('as')]), t._v(' qiniu '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'qiniu-js'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n'), ]), ]), ]), a('p', [ t._v('其次我们修改'), a('code', [t._v('h5_plus')]), t._v('工程的'), a('code', [t._v('Upload')]), t._v('组件, 详细地址为'), a('code', [t._v('src/core/FormComponents/Upload')]), t._v('.'), ]), t._v(' '), a('p', [t._v('修改内容如下:')]), t._v(' '), a('div', { staticClass: 'language-js extra-class' }, [ a('pre', { pre: !0, attrs: { class: 'language-js' } }, [ a('code', [ a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' fileName '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('name\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' suffix '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'自定义文件后缀'"), ]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' putExtra '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n fname'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' fileName'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n params'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' uid '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('new')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [t._v('Date')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('uuid')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('16')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('8')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('+')]), t._v(' suffix\n'), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v( '// 使用七牛云上传api, 前提是提前在前端拿到对应的ticket, 可以通过请求的方式获取', ), ]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' observe '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' qiniu'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('upload')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), t._v('file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' uid'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('state'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('qnToken'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('ticket'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' putExtra'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v('\nobserve'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('subscribe')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('null')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token parameter' } }, [t._v('res')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 拼接路径'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' url '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token template-string' } }, [ a( 'span', { pre: !0, attrs: { class: 'token template-punctuation string' } }, [t._v('`')], ), a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [ a( 'span', { pre: !0, attrs: { class: 'token interpolation-punctuation punctuation' }, }, [t._v('${')], ), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('state'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('qnToken'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('domain'), a( 'span', { pre: !0, attrs: { class: 'token interpolation-punctuation punctuation' }, }, [t._v('}')], ), ]), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v('/')]), a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [ a( 'span', { pre: !0, attrs: { class: 'token interpolation-punctuation punctuation' }, }, [t._v('${')], ), t._v('res'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('key'), a( 'span', { pre: !0, attrs: { class: 'token interpolation-punctuation punctuation' }, }, [t._v('}')], ), ]), a( 'span', { pre: !0, attrs: { class: 'token template-punctuation string' } }, [t._v('`')], ), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [t._v('// 存库')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' fileList '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v(' uid'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' name'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' fileName'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' status'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' url '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('setState')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n curImgUrl'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' url'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n fileList\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('props'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('onChange '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('props'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('onChange')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), t._v('fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v('\n'), ]), ]), ]), a('p', [ t._v('其他oss服务类似, 如果不清楚如何配置, 可以在'), a( 'a', { attrs: { href: 'http://h5.dooring.cn/', target: '_blank', rel: 'noopener noreferrer', }, }, [t._v('H5-Dooring官网'), a('OutboundLink')], 1, ), t._v('中找到我们.'), ]), t._v(' '), a('h3', { attrs: { id: '如何接入任何第三方上传服务' } }, [ a( 'a', { staticClass: 'header-anchor', attrs: { href: '#如何接入任何第三方上传服务' } }, [t._v('#')], ), t._v(' 如何接入任何第三方上传服务'), ]), t._v(' '), a('p', [ t._v('首先我们的上传组件'), a('code', [t._v('Upload')]), t._v('使用内部的服务接口来实现上传功能, 所以需要给组件的'), a('code', [t._v('action')]), t._v('赋值, 如下:'), ]), t._v(' '), a('div', { staticClass: 'language-jsx extra-class' }, [ a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [ a('code', [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('Upload'), ]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('fileList'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('onPreview'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('handlePreview'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('onChange'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('handleChange'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('onRemove'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('handleRemove'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('name')]), a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [ t._v('='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), t._v('file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('listType'), ]), a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [ t._v('='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), t._v('picture-card'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('className'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('styles'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('avatarUploader'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('action')]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('sdk_upload_api '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]), t._v(' action'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('withCredentials'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('withCredentials'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('headers'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'x-requested-with'"), ]), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' localStorage'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [ t._v('getItem'), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'user'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("''")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'authorization'"), ]), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' localStorage'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [ t._v('getItem'), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'token'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("''")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]), t._v('headers\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('beforeUpload'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('handleBeforeUpload'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('length '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>=')]), t._v(' maxLen '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('null')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' uploadButton'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n')]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('')]), ]), t._v('\n'), ]), ]), ]), a('p', [ t._v('如果需要集成第三方oss, 如七牛云, 阿里oss等, 我们需要将'), a('code', [t._v('Upload')]), t._v('组件的'), a('code', [t._v('action')]), t._v('属性设置为空字符串, 其次删除'), a('code', [t._v('onChange')]), t._v('属性, 上传操作统一在'), a('code', [t._v('beforeUpload')]), t._v('中进行. 案例如下:'), ]), t._v(' '), a('div', { staticClass: 'language-jsx extra-class' }, [ a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [ a('code', [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('Upload'), ]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('fileList'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('action')]), a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [ t._v('='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('onPreview'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('handlePreview'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('onRemove'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('onRemove'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('name')]), a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [ t._v('='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), t._v('file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('listType'), ]), a('span', { pre: !0, attrs: { class: 'token attr-value' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation attr-equals' } }, [ t._v('='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), t._v('picture-card'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('"')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('className'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('styles'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('avatarUploader'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('headers'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]), t._v('headers'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('beforeUpload'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('handleBeforeUpload'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('length '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>=')]), t._v(' maxLen '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('?')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('null')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' uploadButton'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n')]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('')]), ]), t._v('\n'), ]), ]), ]), a('p', [ t._v('自定义上传的核心逻辑放在了'), a('code', [t._v('beforeUpload')]), t._v('上. 我们具体看看'), a('code', [t._v('beforeUpload')]), t._v('这个方法如何实现.'), ]), t._v(' '), a('div', { staticClass: 'language-js extra-class' }, [ a('pre', { pre: !0, attrs: { class: 'language-js' } }, [ a('code', [ a('span', { pre: !0, attrs: { class: 'token function-variable function' } }, [ t._v('handleBeforeUpload'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token parameter' } }, [ t._v('file'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v('RcFile'), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=>')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 1. 限制图片类型'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' isJpgOrPng '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('type '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'image/jpeg'"), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('type '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image/png'")]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('type '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image/jpg'")]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('||')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('type '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('===')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image/gif'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('!')]), t._v('isJpgOrPng'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n message'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('error')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'只能上传格式为jpeg/png/gif的图片'"), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 限制上传文件大小'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' isLt3M '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('size '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1024')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1024')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('3')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('!')]), t._v('isLt3M'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n message'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('error')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'图片必须小于3MB!'"), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('if')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), t._v('isJpgOrPng '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]), t._v(' isLt3M'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 3. 正常上传逻辑'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' fileName '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' file'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('name\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 3.1 调用oss接口, 将图片上传oss'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 3.2 将接口返回的url信息, 组装成fileList数据结构, 并更新state'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]), t._v(' fileList '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v(' uid'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' name'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' fileName'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' status'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' url '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('setState')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n curImgUrl'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' url'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token comment' } }, [ t._v('// 3.3 将数据传给上层保存'), ]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('props'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('onChange '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('this')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('props'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('onChange')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), t._v('fileList'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]), t._v(' isJpgOrPng '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]), t._v(' isLt3M'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v('\n'), ]), ]), ]), ]); }, [], !1, null, null, null, ); s.default = p.exports; }, }, ]);